Skip to main content

Questions tagged [less]

Less is an open-source stylesheet preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. For the UNIX command, use [less-unix].

106 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
6 votes
1 answer
2k views

How do you include a custom LESS file inside of a child theme?

I'm starting a new project using Magento 2.1 and I'm a little confused on how LESS compilation works. I created a child theme using a purchased theme as the parent. Inside my child theme, I added ...
user1608993's user avatar
5 votes
1 answer
548 views

Use UI library mixins in custom module

I need to use some UI components in a custom module, so I included Magento2 Ui base library in my less file in this way: @base-dir: "../../"; @import '@{base-dir}css/source/lib/_lib'; This works ...
Mir's user avatar
  • 466
3 votes
0 answers
598 views

Plugins less with Magento Theme

Good morning, I would like to know if somebody has worked with less plugins in Magento Environment? Indeed, I met no difficulties with grunt tools, but when Magento compile all files (through setup:...
Ilan Parmentier's user avatar
3 votes
2 answers
3k views

How to remove lib-font-face from Magento 2

I've created a theme in Magento2 which inherits from the Luma theme. So it has inherited it's lib-font-face, which can be found in the styles-m.css @font-face { font-family: 'luma-icons'; src: ...
Holly's user avatar
  • 4,873
3 votes
1 answer
534 views

Magento Grunt Less Compilation behaves weird

I have a custom theme Mycompany/mytheme including <Magento>/<blank> as parent. The locale is set to de_DE. When I execute php bin/magento setup:static-content:deploy de_DE everything ...
juhanix's user avatar
  • 671
3 votes
2 answers
1k views

Less file changes not taken in production

In prod mode with Magento 2.0.5 Making changes to app\design\frontend\mythemes\2016\web\css\source\_extend.less Then , rm -rf var/cache/* var/view_preprocessed/* pub/static/* php bin/magento setup:...
arsenik's user avatar
  • 199
3 votes
0 answers
92 views

Email.less won't compile

I tried to customize my emails with the _email-extend.less in my theme. But no matter what I try to do at the end Magento only compiles the email-inline.css instead of the email.css. I also tried to ...
Timo.Klement's user avatar
2 votes
2 answers
869 views

How to use theme's _variables.less file in my custom code module?

I have written a custom module that is located in the /app/code folder. My less file is located in /app/code/<Vendor>/<Module>/view/frontend/web/css/source/_module.less. How do I include ...
Richard Parnaby-King's user avatar
2 votes
1 answer
61 views

Css compilation issue on server

My styles are not working with bin/magento setup:static-content:deploy. It is working only after running grunt commands. Due to this my code is not working in server. we are using Magento 2.3.5-p2.
Ramyasri's user avatar
2 votes
0 answers
227 views

Recommended LESS Linter for Magento2

Is there a recommended tool for linting LESS code in Magento2? Interestingly, ESLint Rules are provided for Javascript linting, but when it comes to LESS, all they seem to provide is a coding standard....
quickshiftin's user avatar
  • 1,426
2 votes
0 answers
233 views

How magento decides order of all _module.less file imported through @magento_import directive?

I am trying to add module specific less file named _module.less inside my custom module Mynamespace_Mymodule in M2. For that I have created module.xml file with below sequence. <module name="...
Shashank Bhatt's user avatar
2 votes
2 answers
4k views

Magento 2: Font family does not change. How to troubleshoot?

I created a child theme that inherits from theme X that in turn inherits from Magento Luma Theme. Hence, Theme inheritance is as follows: Magento Blank <- Magento Luma <- Theme X <- My Theme ...
Jens's user avatar
  • 401
2 votes
0 answers
264 views

Grunt - is it possible to watch custome module less files?

I figured out how to watch less files changes inside my custome theme folder using Grunt, but is there any way how to watch less files in custome module? Let's assume module like so: app/code/...
tesar.hk's user avatar
2 votes
1 answer
1k views

Category grid Display - Item Hover

On main category page when I mouse over each product - this is how they show. Product image displays - Title/Price get covered up. There seems to be another hover box behind and below the main one ...
John's user avatar
  • 57
2 votes
0 answers
118 views

magento 2 Grunt watch loads old css when changing imported css file

When I use Grunt Watch my less compile does not work as I expect it to be. When I work directly in my theme. less file all perfectly changes and even with livereload works absolutely great. But ...
Kay Int Veen's user avatar
  • 1,503
2 votes
0 answers
24 views

How to add new theme name to grunt CLI command to run grunt tool in Magento 2 with CLI commands instead of editing less.js and themes.js file?

I read this , But I wanna add new theme name to grunt CLI command with some CLI commands not editing a less.js and thmemes.js manually.Is there any solution for this something Like (magento2 add-...
ali gh's user avatar
  • 731
2 votes
1 answer
777 views

SyntaxError: Cannot read property 'numerator' of undefined in pub\static\fron \package\theme\en_US\css\source\lib\_responsive.less

SyntaxError: Cannot read property 'numerator' of undefined in pub\static\frontend\package\theme\en_US\css\source\lib_responsive.less on line 44, column 9: 43 @media only screen and (max-width: ...
Satish Rana's user avatar
  • 1,491
2 votes
1 answer
106 views

Magento 2.0.7 grunt:less problem

I'm using DigitalOcean one-click-install Magento 2.0.7 installation on ubuntu and I have installed nodejs and grunt following the official tutorials. I added my theme to /dev/tools/grunt/configs/...
raouaoul's user avatar
  • 307
2 votes
2 answers
49 views

Is there a way to use a boilerplate for CSS?

I have to redesign an existing M2-Shop with a given style guide. That guide defines structures for headlines, sub-lines, product etc. like a style guide does. My problem is that there is no given ...
Timo.Klement's user avatar
2 votes
0 answers
541 views

Magento2: Mixin is undefined on deploying static content

I have created several mixins in my custom theme within the file "_mixins.less", these work locally and are loaded properly from my other less files. However, when I want to deploy static content I ...
Michiel's user avatar
  • 21
2 votes
1 answer
3k views

Adding custom font to _typography.less parse error

I try to add some custom fonts to my theme, so I created file app/design/frontend/vendor/theme/web/_typography.less and added the code inside of it: .lib-font-face ( @family-name:'OpenSans ...
Anitr's user avatar
  • 448
2 votes
0 answers
427 views

How to proper extend variables and override module style?

I am new to Magento and currently developing a child theme inherited from the Magento blank theme. I read the developer documentation and doing okay. I created my own style.less in my web directory ...
Dominik Spiertz's user avatar
2 votes
0 answers
184 views

Some LESS variables not working

I'm creating a custom theme inheriting from Magento Blank. I'm overriding LESS variables in my theme.less file. Must are working fine, but there are a few that arn't working. Example; Neither @...
ScorpioTiger's user avatar
1 vote
1 answer
48 views

How to compile my styles in _module.less inside the Amasty_CheckoutCore on the Child Theme in Magento 2

I am trying to change the styles in amasty checkout page using the _module.less file and previously I used the _module.less inside the web/css/source in the Child theme to change my theme styles now I ...
Naveen Raj Kumar's user avatar
1 vote
1 answer
2k views

Magento 2 : How to Import Custom Module's Less file in Custom Theme

I am creating custom theme without parent. Now, I want to add custom less file inside Magento_Theme folder. File path : app/design/frontend/VendorName/ThemeName/Magento_Theme/web/css/source/_mycustom....
Ankita Patel's user avatar
1 vote
1 answer
188 views

M2 - Best practice for adding custom less file in Custom Theme for CMS Static Block

I just created custom theme, i have followed a number of guides to properly setting up .less files in a custom theme and nothing seems to be working. Where should i place less file for cms custom ...
zus's user avatar
  • 175
1 vote
0 answers
23 views

Adding values dynaamically in less files

I have created a theme and had configuration for the colours and background configuration in backend. I want those values to be replaced in the less file.Can it be achieved.If so please guide me to ...
Tanmay's user avatar
  • 790
1 vote
2 answers
404 views

Update styling magento 2 in production mode

I have a server with a production install of magento. When I deploy a new version, adding for example a new .less file, the new markup doesn't get loaded. I cleared the cache, rebuild the static-...
Jonas de Herdt's user avatar
1 vote
1 answer
998 views

Magento 2 - use LESS variables in custom LESS file

I added bootstrap 4 to my site, but it overwrites many magento 2 core css. So I added a new file THEME\web\css\bootstrap.less where I try to fix these problems, and added it to my THEME\Magento_Theme\...
Black's user avatar
  • 3,380
1 vote
0 answers
204 views

Missing cached stylesheet for Magento 2 Theme

We are using the free HiddenTechies theme "Bizkick" for our Magento 2 store and we are having an issue with a missing stylesheet. On the front page, the theme is displaying correctly except for two ...
Russell Chisholm's user avatar
1 vote
0 answers
136 views

Which LESS files do you compile in a child theme?

I'm trying to create a theme based on Pixtron. I'm using Gulp rather than Grunt, but everything I've read about compiling LESS files has the same instructions: you have point to the source file(s) (e....
NikkiBdraws's user avatar
1 vote
0 answers
36 views

Which css format is best for Magento 2 theme?

I am aware that Magento 2 uses Less CSS Format, I have just one daught what if I am use Sass CSS? Can anyone please answer below questions. What if I am using a simple CSS format? What are the ...
Sanjay Gohil's user avatar
  • 2,200
1 vote
0 answers
270 views

How to edit responsive.less file in theme magento 2?

I setup unero theme which has responsive.less file in the dire web/css/responsive.less. I need to edit this file. first I took a copy of that file and past it to my theme dire which is app/design/...
nashwa ghazy's user avatar
1 vote
0 answers
71 views

Magento 2.3 Client Side less compilation static files not found

if I enable the Client side less compilation and flush the static file cache I will get 404 Errors for all files in the media and pub/static direction. I'm using nginx. If I compile the files manual ...
henning's user avatar
  • 11
1 vote
0 answers
53 views

Magento2 CSS groups in styles-m.css in wrong order

my themes "_extend.less" file looks like this: //common & when (@media-common = true) { ... } //mobile .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { ... } //...
mukki182's user avatar
1 vote
0 answers
376 views

Magento2 : How to create custom less file in magento 2 for particular store?

In Magento2, how to create custom.less file for a particular store ? i created custom themes like theme1, theme2 and theme3 in magento2 and also i created custom.less file only in theme but when i ...
Deepak Bhatt's user avatar
1 vote
1 answer
374 views

Magento 2 Autoprefixer in production mode

Magento 2 comes with a preinstalled autoprefixer for Grunt. But is it possible to use the autoprefixer in the production mode too? I have a lot of CSS which does not work without the vendor prefixes ...
Fredwak's user avatar
  • 21
1 vote
1 answer
993 views

How to install node_modules in server for grunt configuation

As a designer I am totally new to magento 2 file structure and preprocessing. As far as my understanding is correct, magento uses less files and uses gruntfile.js for preprocessing so that via ...
Shashank Bhatt's user avatar
1 vote
0 answers
505 views

Change default Magento 2 theme to use a boxed layout instead of full width?

Change default Magento 2 theme to use a boxed layout instead of full width? I'd like to change my Magento 2 theme to use a boxed layout instead of a full layout. I've already started customizing the ...
James's user avatar
  • 281
1 vote
0 answers
75 views

Change colour of discount code dropdown on cart page in Luma - Magento 2

On the cart page in the Luma theme there is a dropdown that when clicked expands to allow you to enter a discount code. What is the less variable to change this colour please? This is the CSS that ...
Ordog's user avatar
  • 344
1 vote
0 answers
401 views

Adding Bootstrap RTL LESS to Magento 2 theme

I need to include bootstrap-rtl LESS files to my theme when using fa_IR locale. So I did: Add those downloaded LESS files to: app/design/frontend/<Vendor>/<Theme_Name>/web/i18n/fa_IR/...
Mehran Zarei's user avatar
1 vote
1 answer
449 views

How to amend header to include background image - Magento 2.1.7

I have a custom theme on Magento 2.1.7 installation, based on the Blank theme. I am trying to amend the header block to have a background image (behind the logo - though this is not important). I have ...
Blas O Gymru's user avatar
1 vote
0 answers
389 views

Override _colors.less in backend

I need to override _colors.less to change color on admin backend. The file is here : vendo/theme-adminhtml-backend/web/css/source/variables/_colors.less I don't find solution to do it, I need to ...
Jeremie CIESLARCZYK's user avatar
1 vote
1 answer
112 views

How to setup grunt themes.js for my theme. Should I point to css folders of blank theme?

I don't know if I should point to the folders I have created under my theme or should I use the ones that I inherit from which is blank. I have created my own folders but they are empty. Can I import ...
Kaki Sami's user avatar
  • 327
1 vote
0 answers
156 views

Add Custom Mixin To Lib Less

I can use .lib-clearfix() in source/_module.less files within custom modules, I want to add a mixin similar to that so I can call it from all modules but have it stored within the theme. What is the ...
LM_Fielding's user avatar
  • 1,533
1 vote
0 answers
240 views

Ultimo Less files dont compile

I am using the Ultimo theme. As per its documents it says to make a child theme and then add any custom css in the provided less file. I have done this but it is difficult to get it to generate the ...
Guerrilla's user avatar
  • 187
1 vote
1 answer
257 views

Email.less is pulling in theme.less adding unnecessary styles to sales emails

Email.less is pulling in theme.less adding unnecessary styles to sales emails. This is happening in our parent blank theme in the vendor folder. Is there a way to kill the @import so its not being ...
Matthew McLennan's user avatar
1 vote
0 answers
97 views

why Magento2 serves LESS files when I'm in server-side-less-compilation modus?

I have changed my admin-config LESS compilation modus to: Client side less compilation. Now I have changed it back to: Server side less compilation. But my admin panel and webstore still serve less ...
user3310748's user avatar
1 vote
0 answers
60 views

Error when compile file custom.less to custom.css in Magento 2.1 [solved]

I have file custom.less .page-header { margin: auto; } .brand-logo { display: block; text-align: center; position: absolute; left: 50%; } I use comment php -dmemory_limit=6G bin/magento ...
user3408888's user avatar
1 vote
0 answers
2k views

bootstrap into luma extended theme - magento2

I created theme that extend luma. I have integrated bootstrap into magento using this link after that product detail page and page header alignment are not nice. Due to commonalities between these ...
Bilal Usean's user avatar