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].
269 questions
0
votes
2
answers
61
views
How to extend the parent theme styles from child theme
We are working on the child theme that inherits Magento/luma and I am trying to extend the styles from my child theme, unfortunately, it is throwing errors like some files are missing in my child ...
0
votes
1
answer
40
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 ...
- 105
0
votes
1
answer
34
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 ...
- 13
0
votes
1
answer
66
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 ...
1
vote
2
answers
453
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/...
- 33
0
votes
2
answers
316
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 ...
- 503
1
vote
3
answers
51
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 ...
- 173
0
votes
1
answer
63
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 ...
- 3,431
1
vote
1
answer
66
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 ...
0
votes
1
answer
112
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" ?>
<...
- 11
1
vote
1
answer
77
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/...
- 3,431
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.
...
- 29
0
votes
0
answers
186
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 ...
0
votes
1
answer
153
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) {
...
- 13
0
votes
2
answers
1k
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-...
2
votes
2
answers
1k
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 ...
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.
- 577
0
votes
1
answer
700
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 ...
- 143
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....
- 602
0
votes
1
answer
271
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="...
- 231
0
votes
2
answers
606
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 ...
- 47
0
votes
1
answer
203
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 ...
- 11
0
votes
1
answer
107
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 ...
- 123
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/...
- 3,431
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 ...
- 123
1
vote
1
answer
214
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 ...
- 123
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&...
- 816
0
votes
3
answers
920
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/...
- 1,602
0
votes
1
answer
622
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; }
....
- 235
0
votes
2
answers
487
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-...
- 101
1
vote
1
answer
169
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";...
- 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 ...
- 794
2
votes
1
answer
62
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.
- 21
2
votes
1
answer
111
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 ...
0
votes
1
answer
537
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 ...
- 87
1
vote
2
answers
426
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-...
- 172
1
vote
1
answer
1k
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\...
- 3,431
1
vote
2
answers
885
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 = @...
- 3,431
0
votes
1
answer
291
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 ...
- 3,431
2
votes
0
answers
237
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....
- 1,436
0
votes
1
answer
252
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}...
- 602
1
vote
0
answers
207
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 ...
- 144
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/...
- 49
1
vote
1
answer
321
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: ...
- 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 &...
- 2,254
0
votes
2
answers
716
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/...
- 732
0
votes
1
answer
65
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 ...
0
votes
2
answers
458
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"
&...
- 31
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 @...
- 151
0
votes
2
answers
145
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:
...
- 3,431