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].
107
questions with no upvoted or accepted answers
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 ...
- 51
5
votes
1
answer
519
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 ...
- 456
3
votes
0
answers
566
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:...
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: ...
- 4,823
3
votes
1
answer
529
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 ...
- 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:...
- 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 ...
- 702
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 ...
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.
- 21
2
votes
0
answers
214
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,416
2
votes
0
answers
212
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="...
- 342
2
votes
0
answers
261
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/...
- 45
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 ...
- 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-...
- 731
2
votes
1
answer
759
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: ...
- 1,471
2
votes
1
answer
97
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/...
- 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 ...
- 702
2
votes
0
answers
529
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 ...
- 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 ...
- 448
2
votes
0
answers
423
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 ...
2
votes
0
answers
183
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 @...
- 51
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....
- 582
1
vote
1
answer
183
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 ...
- 155
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 ...
- 780
1
vote
2
answers
382
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
947
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,150
1
vote
0
answers
201
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
0
answers
129
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....
- 21
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 ...
- 2,190
1
vote
0
answers
263
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/...
- 41
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 ...
- 11
1
vote
0
answers
50
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) {
...
}
//...
- 11
1
vote
0
answers
369
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 ...
- 25
1
vote
1
answer
358
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 ...
- 21
1
vote
1
answer
976
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 ...
- 342
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
...
- 391
1
vote
0
answers
497
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 ...
- 281
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.
...
- 33
1
vote
0
answers
73
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 ...
- 344
1
vote
0
answers
398
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/...
- 109
1
vote
1
answer
446
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 ...
- 11
1
vote
0
answers
382
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 ...
1
vote
1
answer
110
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 ...
- 327
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 ...
- 47
1
vote
0
answers
148
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 ...
- 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 ...
- 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 ...
- 1,480
1
vote
0
answers
95
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 ...
- 311
1
vote
0
answers
57
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 ...
- 21
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 ...
- 9,917