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
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
...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
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 ...
CommunityBot
- 1
2
votes
4
answers
3k
views
Magento 2 - css source maps not working
I created a new theme which extends from magento luma. I try to develope with less instead of css.
I need to enable CSS Source maps, so that I can debug my less, it helps to see in which less files ...
- 3,392
3
votes
3
answers
6k
views
Magento 2 Theme Development - grunt watch not detecting changes of custom LESS file
We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:
we've created a custom theme which has Magento/luma theme as parent.
according ...
- 3,392
0
votes
2
answers
35
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 ...
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:...
CommunityBot
- 1
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 @...
CommunityBot
- 1
0
votes
2
answers
2k
views
Magento 2 extend styles-m.less
I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
...
CommunityBot
- 1
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: ...
CommunityBot
- 1
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....
CommunityBot
- 1
1
vote
2
answers
384
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/...
- 577
1
vote
1
answer
2k
views
(Magento2) Grunt Less problem with a new theme
I've cloned the blank theme for app/design/frontend/lima/mdl, swapping Magento/blank for lima/mdl and give this error:
Processed Area: frontend, Locale: pt_BR, Theme: lima/mdl, File
type: less.
...
- 198k
0
votes
1
answer
35
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 ...
- 7,608
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 ...
- 144
0
votes
1
answer
58
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 ...
- 111
7
votes
5
answers
33k
views
Magento 2 less compilation error while setup:static-content:deploy
After updating to Magento 2.1.16 on my staging server with nginx server and php7.0 I am facing issue in compiling less and css files.
The files styles-l.css and styles-m.css are missing - not ...
25
votes
3
answers
22k
views
Difference between _module.less and _extend.less
Is there any difference between extending a theme using _module.less and _extend.less? And what is the best practice when extending a module/theme?
My first thought was it's better to use _module....
- 1,110
0
votes
2
answers
290
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 ...
- 7,608
1
vote
3
answers
50
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 ...
- 566
0
votes
1
answer
61
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,392
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.
2
votes
2
answers
989
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 ...
- 1
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
1
vote
1
answer
61
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 ...
- 7,608
0
votes
1
answer
106
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" ?>
<...
- 7,608
7
votes
2
answers
7k
views
Problems with less variables in _theme.less
I use below media queries in my custom _theme.less like
& when (@media-common = true) { }
but when I execute this command bin/magento setup:static-content:deploy I get variable @media-common is ...
- 182
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/...
- 7,608
0
votes
0
answers
176
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
150
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) {
...
- 39
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-...
- 39
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
2
answers
143
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:
...
- 664
2
votes
3
answers
3k
views
Error when running grunt exec
I have followed the docs for setting up Less compilation. Running grunt clean and grunt less works without errors, but when I run grunt exec (with or without appending a specific theme name) I get the ...
- 664
2
votes
2
answers
2k
views
How to set frontend compilation via the database
How do you set the front-end workflow option via the DB rather than the admin?
This is the setting I'm referring to:
Stores > Configuration > ADVANCED > Developer > Front-end ...
CommunityBot
- 1
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 &...
CommunityBot
- 1
0
votes
2
answers
1k
views
Magento2 - Change position of wishlist on catalog-category view page
I want to change the position of Wishlist icon on the top of image .
Do I have to achieve this through xml or through css?
I tried through xml but I couldn't move it over the image.
Here is the ...
- 2,118
4
votes
3
answers
10k
views
Magento 2 - Importing LESS mixins/variables from lib
Explanation
I'm really not a fan of loading all the CSS on every page regardless of whether it's required, to me this is bad practice. Therefore I am creating CSS files for certain areas, e.g ...
- 1
0
votes
1
answer
643
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 ...
- 105
0
votes
2
answers
41
views
How do I get Magento2 to process my _theme.less?
I can't figure out how to get the LESS files in my theme to update. I've tried every different .less file the docs recommend. I've tried copying this file from samples:
https://github.com/magento/...
- 2,118
0
votes
3
answers
448
views
Magento 2 - Why is less so painfull to use compared to css? (css vs. less)
I started to learn .less but it brings more difficulties than benefits.
In css, I can just edit files in the browsers developer tool after I activated "Enable Local Overrides", and see the result ...
- 3,392
0
votes
2
answers
423
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"
&...
- 2,118
0
votes
2
answers
476
views
Magento 2 - How to know which .less file I have to change and what I have to change
I want to change the background color of a certain button in the customer area.
It is the "Compare Product" Button at the left sidebar.
How do I know which .less file I have to change?
The ...
- 15.7k
0
votes
1
answer
566
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; }
....
- 2,118
0
votes
1
answer
234
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}...
- 2,118
0
votes
1
answer
250
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
584
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 ...
- 193
0
votes
1
answer
54
views
How to edit .less or css files
I like to change some styles in my website, so i edited .less and CSS files
for example: app/design/frontend/Templatemonster/theme/web/css/styles-l.less
I used "flush Magento cache" from backend ...
- 2,118
1
vote
2
answers
860
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 = @...
- 2,118