Skip to main content
OverflowAI is here! AI power for your Stack Overflow for Teams knowledge community. Learn more

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].

Filter by
Sorted by
Tagged with
0 votes
1 answer
27 views

"Best practice" editing CSS while in development to avoid cache rebuild time

I'm building my first Magento site after spending the last few years developing sites with other eCommerce engines - wow, Magento does everything differently huh?! Not really best practice but how do ...
CResults's user avatar
  • 105
0 votes
1 answer
27 views

Can I edit Magento 2 LESS files from the Chrome Dev Tools?

I had a pretty comfortable workflow in Magento 1 where I've added the 'skin' directory to the workplace in Chrome Dev Tools and could edit the CSS files right from the Dev Tools. Is something like ...
Heinlein's user avatar
0 votes
1 answer
33 views

How to use Multiple custom .less files in Magento 2 using Grunt.js

We are developing a custom theme for our Front Store view so we need to use multiple .less files in web/css/source. with the help of Grunt.js, the development makes us faster than manually generating ...
Naveen Raj Kumar's user avatar
1 vote
1 answer
220 views

Extend Magento Luma theme less

When extending Magento Luma less files in one children theme, what exactly is the name and the complete structure of the "parent" folder (mentioned at https://developer.adobe.com/commerce/...
steve's user avatar
  • 33
0 votes
2 answers
244 views

Magento2 - reduce size of style-m.css?

I read up on the use of less files by Magento. I checked the size of the two files inside the pub/static folder and I noticed that the style-m.css file is twice the size of style-l.css. Why? I simply ...
Jackom's user avatar
  • 493
1 vote
3 answers
47 views

Luma theme less styles styles not showing

I have a fresh Magento 2 install using the luma theme which i am happy to use. I have tried editing less files by moving them from vendor/magento/theme-frontend-luma/web/css/source/_theme.less to ...
totneschap's user avatar
0 votes
1 answer
53 views

Magento 2 - Change value in .less file of a third party module

I need to change a value in this file of a 3rd party module from my own theme: vendor/amasty/xsearch/view/frontend/web/css/source/module/components/_search-input.less Am I correct that I need to make ...
Black's user avatar
  • 3,359
1 vote
1 answer
47 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
0 votes
1 answer
97 views

Add css file to layout not working

I try to add a css file to a new layout for a cms page (magento 2): src/app/design/frontend/NAME/default/Magento_Theme/page_layout/lpmdd-without-header.xml <?xml version="1.0" ?> <...
blind's user avatar
  • 11
1 vote
1 answer
74 views

Magento 2 - Override style which is in vendor/foo/bar/view/base/web/css/source/module/components/_foo.less from own theme?

How can I override the file vendor/foo/bar/view/base/web/css/source/module/components/_foo.less I put it in my theme at app/design/frontend/company/fresh/Foo_Bar/templates/web/css/source/module/...
Black's user avatar
  • 3,359
0 votes
2 answers
1k views

Magento 2 : How Can I Add custom.less File For Only Specific Page?

how can i add custom.less file for any specific page in child theme? means don't need genrate inside my custom css code in style-l.css or style-m.css and i have already 2 methods used. Method 1. ...
Gaurav's user avatar
  • 29
0 votes
0 answers
148 views

How to change the LESS variables using javascript based on the admin side configurations?

I am Naveen raj, and I am a new Magento 2 so I don't know how to use the color values inside the less which I got from the admin side. I got value from the admin side and am trying to set that value ...
Naveen Raj Kumar's user avatar
0 votes
1 answer
129 views

Error in LESS file

I am getting this error while running the deploy command. What is the issue? Please help me. My code is .fieldset { .field { &:not(.choice) { ...
user170106's user avatar
0 votes
2 answers
899 views

How to use the custom fonts in M2 using LESS

I am new to magento2, so I don't understand the less flow in M2, how it is working, and how to use the custom fonts in my theme which is present in the /fonts dir when I import the fonts using @font-...
Naveen Raj Kumar's user avatar
2 votes
2 answers
836 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
0 votes
1 answer
1k views

How to add .less css files in custom theme magento 2

I want to add the custom.less file in my custom theme which i want to develop from scratch. so, anyone have an idea then please share with me.
Deep Shah's user avatar
  • 561
0 votes
1 answer
543 views

How to create _extend_child.less for grand children theme

I am new to Magento 2. I am having difficulty in creating a child theme. However I have created the child theme now I am facing how to add source for child them. In my configuration, I have created ...
Sanjay Goswami'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
0 votes
1 answer
214 views

styles-m.css and styles-l.css link tags missing from head

Suddenly the css files stopped being loaded on my site. I found they are no longer being rendered in the <head>. Normally they would look like: <link rel="stylesheet" type="...
David Stone's user avatar
0 votes
2 answers
540 views

Remove a style from style-m

this style is causing an issue with my mobile menu. .navigation .submenu:not(:first-child).expanded { display: block !Important; } I have tried to overwrite it but it still appears as a ...
Carter's user avatar
  • 47
0 votes
1 answer
197 views

Magento 2.4.2, child theme of Blank - Front end. How do you remove properties in parent Blank theme styles, for example footer border?

The file I use to override these styles: app/design/frontend/Vendor/ChildTheme/web/css/source/_module.less as per M2 documentation. I tracked that it applies my modified styles, but then goes and puts ...
TMNR's user avatar
  • 11
0 votes
1 answer
99 views

Magento 2.4 Commerce cloud - After push the code from dev to live server less not compiled to css file

I have created a custom theme, for the listing page i have created custom less file, app\design\frontend\Zero\my_theme\Magento_Catalog\web\css\source\ _custom_listing_page.less On the Website listing ...
zus's user avatar
  • 165
0 votes
1 answer
1k views

Magento 2 - Why do I get stupid "compilation from source" errors on setup:static-content:deploy?

If I execute php bin/magento setup:static-content:deploy then I get alot of errors like: Compilation from source: /home/company/staging.company.de/app/design/frontend/company/fresh/web/css/source/...
Black's user avatar
  • 3,359
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
  • 165
1 vote
1 answer
201 views

M2 - How to include custom theme directory less file path into my CMS block?

I have created custom theme which is inherit from blank theme, I have created more than one CMS block and include into CMS page for home page design. One of my CMS block named service banner In the ...
zus's user avatar
  • 165
0 votes
1 answer
2k views

Magento 2: Add CSS / JS to custom layout - only applied to single page

I have a custom page layout for Home Page. I created this custom layout this way: app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml <?xml version="1.0" encoding="UTF-8&...
Kalvin Klien's user avatar
0 votes
3 answers
822 views

Less file styles not applying in Magento 2

I have custom theme in ..../design/frontend/MyVendor/my-theme folder. My main less file is in design/frontend/MyVendor/my-theme/web/css/my-main.less. Content of the main less file: @import './source/...
Lachezar Raychev's user avatar
0 votes
1 answer
499 views

How to enable Dark Mode using Less

I'd like to enable the Dark Mode in Magento 2. Using plain CSS I know it easily achieved by doing: @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } ....
KaMZaTa's user avatar
  • 205
0 votes
2 answers
460 views

Change Add to Cart button in Luma 2 child theme on Magento 2

I have Magento 2.4.1 installed with a custom theme. I have a _theme.less file (themeDir\web\css\source_theme.less), where I changed the button color to: @button-primary__active__background: @color-...
Fred Faust's user avatar
1 vote
1 answer
166 views

Module LESS results are different depending on use of grunt or setup:static-content:deploy

I am tying to break up my CSS, in a rather big module, so that it is easier to find the CSS I need. I have done something like the following in my _module.less: @import "module/_first-less";...
Kieran's user avatar
  • 98
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
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
1 answer
94 views

It is possible to deploy only one file using deploy command?

In production mode when I change the design of some particular block or page then I am only working on one or two files like js and CSS. To apply that one change I need to deploy the whole theme. Can ...
Bhavesh Prajapati's user avatar
0 votes
1 answer
475 views

How do I override a value from a magento 2 lib LESS mixin?

I have created my own theme using Blank Theme as it's base. In my theme, I have a file in web/css/source/_navigation.less As I understand, this file calls a mixin. .lib-main-navigation();which pulls ...
gxrobb's user avatar
  • 87
1 vote
2 answers
398 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
996 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,359
1 vote
2 answers
811 views

Magento 2 - Override luma themes module less file

I try to override css code from the file vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\_cart.less: .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @...
Black's user avatar
  • 3,359
0 votes
1 answer
234 views

Magento 2 - Compilation from source, errors during `php bin/magento setup:static-content:deploy`

I get this error when I execute php bin/magento setup:static-content:deploy: Compilation from source: /app/design/frontend/company/fresh/web/css/source/lib/extend/amasty/mega-menu/header.less variable ...
Black's user avatar
  • 3,359
2 votes
0 answers
225 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
0 votes
1 answer
203 views

How to add ttf file in less using typography.less file?

I want to call .ttf file instead of .woff2 file in typography.less. But, it's not call and return 404 error. Code : .lib-font-face( @family-name: @roboregular, @font-path: '@{baseDir}...
Ankita Patel's user avatar
1 vote
0 answers
203 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
1 answer
2k views

How to get pub media url in .less file?

I have an image that i need to use in .less file, the image is located in: pub/media/kool/setting/blank.gif in the .less files i tried to define it like this: @footer_bg_file:~"../kool/setting/...
jojo's user avatar
  • 39
1 vote
1 answer
261 views

Adding CSS to child themes _extend.less has no effect

I have set up a child theme of Luma and can see it is being loaded by looking at the page source in the browser. I now want to customise the styling of the theme. I followed the instructions here: ...
Goodbytes's user avatar
  • 113
0 votes
1 answer
5k views

Issue deploying Magento 2: Unable to get content

During deploy we get issues: Deploy using quick strategy frontend/Magento/blank/en_US 0/2437 >-------------------frontend/Magento/blank/en_US 2/2437 &...
Sylvester's user avatar
  • 2,234
0 votes
2 answers
633 views

CSS and LESS, what is the correct way for including them in a Magento 2 module?

Let's say I have my module which adds a slider to the homepage and there are many styles to define. I know I can add the styles in 2 different ways: Adding a css file MyBrand/MyModule/view/frontend/...
PauGNU's user avatar
  • 722
0 votes
1 answer
63 views

How do you know what CSS name an element is to override it

If I see an element such as this in the code, how do I work out what to put in my less file to override the CSS used on it? button id="bundle-slide" class="action primary customize" type="button" I ...
diddydave's user avatar
0 votes
2 answers
383 views

Can i import theme variables to custom less file?

I want to add a variable that located in "web/css/source/_theme.less" to my custom less file, that I created specialy for home page. I added my less file in "Magento_CMS/layout/cms_index_index.xml" &...
Herecomes's user avatar
0 votes
2 answers
2k views

@baseDir variable not working in less file for background-image. Says undefined

Several other questions/answers here say to use the variable @{baseDir} to get the URL for background-image. I added this to my themes less file, however, when I compile, it crashes. variable @...
Kyle Waid's user avatar
  • 151
0 votes
2 answers
142 views

Magento 2 - When to use the parameter `@_prefix: 1` when calling mixin .lib-css()?

I wonder when I need to use the parameter @_prefix: 1 with .lib-css() I always use it with the css transform property .lib-css(transform, scale(0.65), @_prefix: 1); so that it generates this code: ...
Black's user avatar
  • 3,359
0 votes
1 answer
2k views

Magento 2 LESS - Unable to resolve the source file for ..., after deleting source file

I deleted a less file which I don't need anymore. I also removed the entry from default_head_blocks.xml so that it does not load anymore. I searched my whole theme for main.css and removed all ...
Black's user avatar
  • 3,359

1
2 3 4 5 6