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
40
votes
1
answer
34k
views
How do you override LESS in a custom theme?
I've spent the better part of this week trying to find a clear guide on how to properly create a custom theme and extend exist LESS/CSS without having to copy the entire magento-blank theme.
The ...
- 3,232
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....
- 15.6k
19
votes
1
answer
11k
views
Best way to extend module less found in web/css/source/module, like _minicart.less?
Which is then the best way to extend less files content in <module>/web/css/source/module/, like for instance Magento_Checkout/web/css/source/module/_minicart.less?
Assuming that to
A) ...
- 620
18
votes
1
answer
9k
views
@media-common - Why do we need to use this?
In the Magento 2 lib documentation it contains the following:
@media-common: true|false - sets whether to output common styles. For common styles every time you want to add some styles you should use
...
- 15.6k
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?
- 927
10
votes
3
answers
16k
views
Overriding Blank Theme Styles in Magento 2
How would you go about overriding the navigation styles for a custom theme when inheriting from the blank theme in Magento 2?
I have a theme.css file in my app/design/frontend/<Vendor>/<...
- 745
10
votes
2
answers
8k
views
Magento 2: How to override gallery.css?
I want to override lib/web/mage/gallery/gallery.less and some module files in
lib/web/mage/gallery/module/*.less
I need to override them because I want to change the style of product gallery images....
- 343
10
votes
4
answers
6k
views
Magento 2 : How can I use LESS variables in Modules' LESS files? (not theme)
I try to include specific LESS variables in my Modules' LESS stylesheet. Note: my module, not my theme.
For example have a file called app/code/Vendor/Module/view/frontend/web/css/stylesheet.less. ...
- 12.2k
9
votes
3
answers
2k
views
How does Magento 2 work with CSS grunt-autoprefixer
From looking at a fresh install of Magento 2 (v2.1.8) I see from their Gruntfile.js and package.json files that Magento is using grunt-autoprefixer
This is great, CSS autoprefixers are really useful. ...
- 4,823
8
votes
1
answer
5k
views
How to enable CSS source Maps for Magento 2
How do you enable CSS source Maps for Magento 2's front-end workflow.
I'm learning M2 and have created a custom theme, called "mytheme", inheriting from the out-of-box luma theme. I'd like to use ...
- 4,823
8
votes
2
answers
893
views
Grunt compile of LESS fails with Error compiling lib/web/css/docs/source/docs.less
I'm hoping to get some advice. I pulled a project that I haven't touched in some time and in developer mode I ran 'grunt exec' followed by 'grunt less' and once running 'grunt less' I receive the ...
- 534
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 ...
- 461
7
votes
5
answers
3k
views
Changing breadcrumbs separator symbol
By default the breadcrumbs look like: homepage > category > product.
I would like to change the greater than (>) symbol.
The code that generates it is in
vendor/magento/magento2-base/lib/web/css/...
- 145
7
votes
2
answers
1k
views
Why does gallery.less include _theme.less?
I have a theme that extends luma using _theme.less. On product pages, another CSS file is included in addition to styles-m. The problem is that they both @import _theme.less which results in duplicate ...
- 532
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 ...
- 927
6
votes
5
answers
11k
views
How to configure the theme to use Grunt?
I normally change the file /dev/tools/grunt/configs/themes.js but in the .gitignore we can see a configuration file called /dev/tools/grunt/configs/local-themes.js I'd like to use that file instand a ...
6
votes
3
answers
5k
views
Why clear pub/static/frontend after css changes in dev mode?
I am working with Magento2 and have a question. I am working in the development mode.
But when I do some CSS changes in my theme, why I have to manually clear the pub/static/frontend folder every ...
- 311
6
votes
2
answers
7k
views
Magento 2.2 LESS not compiling locally on Ubuntu
I'm using Ubuntu with Magento 2.2 installed locally for development.
I'm updating my LESS, but it's just not compiling for some reason.
I have all caching turned off in Cache Management, and I run ...
- 281
5
votes
3
answers
6k
views
How to change color of cart icon in minicart?
I am trying to change color of cart icon in header/minicart , as currently it's in grey shade
I tried changing via adding following css in my custom.css at \web\css\custom.css
.minicart-wrapper ....
user56319
5
votes
1
answer
7k
views
How to utilise the existing LESS variables in my new less file
As the title says, i want to use LESS variables that are already defined by Magento. for example,
there is variable called @color-white defined in following file.
ROOT/lib/web/css/source/lib/...
- 749
5
votes
1
answer
934
views
How to compile gallery and calendar css with grunt?
I have put gallery.less and calendar.css in web\mage\gallery and web\mage respectively in my custom theme, But they are not compile with grunt.
How can i compile these files with grunt like other ...
- 3,025
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
4
votes
2
answers
9k
views
How to create custom less file? magento 2
I'm having a problem creating my own less file in my Magento 2? there's a tutorial by Alan Storm through the way he creates a custom less file is by using a module, is there a way to do it without ...
4
votes
2
answers
5k
views
How to use Magento 2's LESS grid system
How are the grid mixins in Magento 2 (vendor/magento/magento2-base/lib/web/css/source/lib/_grids.less) supposed to be used.
For example: I want to display 3 divs as equal columns with margin in ...
- 13.7k
4
votes
1
answer
8k
views
How to use bootstrap in my custom theme [duplicate]
In my extended LUMA theme , how to integrate Bootstrap JS and CSS .
So I can make my CMS page's layout on Bootstrap grid .
Already seen few post here : How to develop theme using twitter bootstrap ...
- 43
4
votes
1
answer
3k
views
Create new M2 breakpoint with .media-width mixin?
I want to change the breakpoint of some some styles inside a native M2 module (specifically Magento_Catalog/web/css/source/_module.less).
Here is a link to the bp in question.
.media-width(@...
- 393
4
votes
1
answer
6k
views
Magento2 : How to override less variable value
How to override default blank theme less variable value?
Generally veriable are declare in lib\web\css\source\lib\variables directory.
i.e from file
lib\web\css\source\lib\variables_typography....
- 2,593
4
votes
2
answers
2k
views
Grunt watch doesn't watch _theme.less and custom less file
That's my css/source file structure:
https://i.stack.imgur.com/5tNxJ.png
I made grunt clean, theme exec, theme less, watch.
Watch is responsive to any less file changes accept of _theme.less and ...
- 107
4
votes
2
answers
138
views
Why does M2 place all CSS in inline <style> tags in the header?
I've set up a site and I must have some strange configurations, because ALL applied styles on the entire site are coming from inline tags in the header:
If you check the markup it comes from this ...
- 393
4
votes
2
answers
156
views
Create less file for custom Theme
How to create new *.less file in Magento 2.3 project ?
Here is my existing Theme:
Here is my existing less file that DOES NOT work:
Nothing is work here:
My question is how to add custom less code/...
- 541
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 ...
- 15.6k
4
votes
4
answers
13k
views
After deleting files under 'view_preprocessed' folder they dont appear again when reloading site
I'm testing some small LESS changes in my theme. After every change I delete the contents inside:
pub/static/frontend/mytheme
and
var/view_preprocessed
Then I reload my site and the contents of ...
- 1,629
4
votes
3
answers
965
views
How can magento2 support .less or css for multi language locale?
For CSS, I found that we can add web/i18n/en_US/mymodule.css for module
If I want to add some locale specific CSS for the core module, where should I put them in? e.g. app/design/frontend/mypackage/...
- 1,228
3
votes
3
answers
13k
views
Accidentally deleted .htaccess file inside pub/static folder
I accidentally deleted my .htaccess file. Before that I could just delete everything in the var and pub/static folder (except the .htaccess file of course) and just reload the page to see my CSS / ...
- 231
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 ...
- 31
3
votes
2
answers
5k
views
Magento2 : Adding my own Background Image to a Custom Theme
I've added a custom magento theme, and now im trying to add a background image to it.
But the dev console in chrome & firefox keeps saying:
"Could not load the image".
I've put the image in ...
- 281
3
votes
2
answers
725
views
Why does Magento 2 use PHP to compile less files?
What I don't understand is that since the .less files are already going to be compiled during development through Grunt, why does Magento 2 still uses oyejorge/less to compile less files through PHP?
...
- 875
3
votes
2
answers
1k
views
Include and compile custom.less file after removing the style-l and style-m css
I am new in magneto2. I am working on LUMA theme and I have to customize it. So my approach is that I am removing all the existing i.e. style-l.css and style-m.css by writing code in the ...
- 133
3
votes
1
answer
5k
views
Magento 2 Custom Theme : Which files to edit in order to customize home page / category css?
I'm trying to insert some CSS changes, after already inserting the html changes in the "content" part of the Home Page cms page.Changes to category pages will follow the same process, once proven that ...
- 33
3
votes
2
answers
2k
views
NameError: variable @font-family-name__base is undefined
This has been asked before, but I'm still not finding a solution. When using client side compile I get "NameError: variable @font-family-name__base is undefined". I've deleted everything and ...
- 223
3
votes
1
answer
2k
views
Override link color in custom less file, Magento2
I want to change the color of the links in my template.
How can I achieve this by using _theme.less?
- 1,834
3
votes
2
answers
801
views
Magento 2 compile less files on staging server
I have a local repo with my Magento 2 development environment. I use
grunt watch to compile my local less files.
I push my edited less file with Git to my Beanstalk remote Develop branch
I deploy (...
- 417
3
votes
1
answer
2k
views
Magento 2: Less Compilation Failing
I'm working with a set of Less CSS files I didn't write in Magento 2. During compilation, I get the following error
Compilation from source:
frontend/Infortis/base/en_US/css/custom.less
...
- 44.3k
3
votes
2
answers
923
views
how to compile single LESS file in magento2
I am working on magento2 theming part. Here we have some predefined and my custom LESS file. Whenever we compile LESS file, it generates two css file -- styles-l.css, styles-m.css . But we do not know ...
- 81
3
votes
4
answers
2k
views
Grunt, .less, and Live Reload - Can't get them working
Good afternoon,
I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {...
- 103
3
votes
1
answer
2k
views
How to create custom breakpoints in magento2?
How can i create custom breakpoint with min and max like @media only screen and (min-width:768px) and (max-width: 1023px) {...} in my custom theme in magento 2.1 ?
- 3,025
3
votes
1
answer
2k
views
See less source files in chrome dev tools
How do you see the less file that is generating the style in chrome dev tools?
working in developer mode, in less.js:
var lessOptions = {
options: {
sourceMap: true,
and in config.less....
- 6,227
3
votes
1
answer
59
views
Is my current way to create a new Magento2 theme the correct method?
I have to create new theme that looks the default Magento Blank theme (other colors, other font). That's why I created a new theme with 1 file less css/source/_theme.less.
This file _theme.less looks ...
- 311
3
votes
1
answer
802
views
Theme inheritance not working _extend.less shouldn't be merged?
I have a custom theme, extends the luma theme, everything works properly.
My custom less modifications were added in web/css/source/_extend.less
Now I would like to create a subtheme from this custom ...
