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].
267
questions
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
1k
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
1k
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
1
vote
1
answer
1k
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
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
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
1
vote
2
answers
3k
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
7
votes
5
answers
30k
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 ...
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.
...
CommunityBot
- 1
5
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
1
vote
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
0
votes
0
answers
15
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
1
answer
144
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/...
- 6,483
25
votes
3
answers
21k
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,040
0
votes
2
answers
169
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 ...
- 6,483
0
votes
0
answers
21
views
4th Generation CSS inheritance - grand grand child theme
I have a child theme that inherits magento luma, let's call it Theme A.
Theme B inherits from theme A,
and Theme C inherits from Theme B (By the way this is a multi-store so this is the reason behind ...
1
vote
3
answers
45
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 ...
- 559
0
votes
1
answer
39
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,150
2
votes
1
answer
60
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
611
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
788
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.
...
- 27
0
votes
1
answer
33
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 ...
- 6,483
0
votes
1
answer
78
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" ?>
<...
- 6,483
7
votes
2
answers
6k
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 ...
- 143
1
vote
1
answer
71
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/...
- 6,483
2
votes
3
answers
2k
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 ...
- 131
0
votes
0
answers
117
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
97
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) {
...
- 41
0
votes
2
answers
756
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-...
- 41
0
votes
1
answer
868
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.
- 535
0
votes
2
answers
140
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:
...
- 644
2
votes
3
answers
2k
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 ...
- 644
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
4k
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
929
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,166
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
431
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,166
0
votes
3
answers
299
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,150
0
votes
2
answers
339
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,166
0
votes
2
answers
385
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.6k
0
votes
1
answer
431
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,166
0
votes
1
answer
168
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,166
0
votes
1
answer
193
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
447
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,166
1
vote
2
answers
735
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,166
0
votes
1
answer
188
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 ...
- 1,944
16
votes
4
answers
24k
views
Less files in custom modules
How do you use less inside custom module
having created code/Vendor/module/view/frontend/web/css/source/custom.less
how do I include and compile?
- 1,702
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,150