20
votes
Accepted
Best way to extend module less found in web/css/source/module, like _minicart.less?
According to Magento 2 conventions, the best way to extend module styles is as follows:
If we want to extend styles from Magento_Checkout/web/css/source/module/_minicart.less we need to have 2 files
...
- 800
20
votes
Magento 2 less compilation error while setup:static-content:deploy
For all Porto Theme users upgrading to Magento 2.3:
Edit the following files (also other language codes if available):
app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/...
- 492
15
votes
Magento 2 - css source maps not working
In magento 2.4.4 I had same problem. I fixed it by downgrading to
"grunt-contrib-less": "1.4.1"
in package.json and running npm install again.
- 331
11
votes
Accepted
Magento 2: How to override gallery.css?
We can override the less file lib in our custom theme. Put this file under web folder:
app/design/frontend/{Vendor}/{Theme}/web/mage/gallery/gallery.less
and add mage/gallery/gallery in PROJECT/dev/...
- 32.3k
10
votes
Accepted
How to change color of cart icon in minicart?
Adding your custom CSS/LESS or updating existing CSS/LESS use _extend.less .
This will load first so there will no issue of css order and you will not require using important
Create this at below ...
- 5,805
9
votes
Accepted
How to configure the theme to use Grunt?
Set up Grunt Environment
When the installation is finished, the next step is to setup the Grunt environment. All described steps are covered in the official Magento 2 documentation, although there it’...
- 1,672
8
votes
Difference between _module.less and _extend.less
Simple explanation or difference between both:
_extend.less is the way to extend/modify parent themes styles for example you're happy with your parent theme Luma and just want to change the button ...
- 2,968
8
votes
Why clear pub/static/frontend after css changes in dev mode?
Developer Mode - Static Files - Basics
If Magento can’t find a static asset file, it will automatically copy or symlink that file from that file’s source module.
Generate Case
If you change the ...
- 10.1k
7
votes
Accepted
Magento 2.2 LESS not compiling locally on Ubuntu
Did you delete the compiled file in the pub/static folder first? You should delete those css files (the styles-m.css and the styles-l.css), clear the var/view_preprocessed folder and then run compile.
...
- 4,333
7
votes
Magento 2 Theme Development - grunt watch not detecting changes of custom LESS file
Please open the file:
dev\tools\grunt\configs\local-themes.js
module.exports = {
company_base: {
area: 'frontend',
name: 'Company/Base', // <--- name must match the folder ...
- 3,431
6
votes
Magento 2 : How can I use LESS variables in Modules' LESS files? (not theme)
I can't immediately suggest a way of making what you are trying to do work, however I would say that that the module should not be reliant on LESS variables from the theme. To do so would be a Magento ...
- 61
6
votes
Accepted
Why does Magento 2 use PHP to compile less files?
In short, it's a question of extendability. As you may know, you are able to use .less files inside of custom modules. Let's imagine a situation when a store using some custom theme and in your ...
- 1,812
6
votes
Why does gallery.less include _theme.less?
I solved my issue by moving all the theme rules from _theme.less into _extend.less.
My _theme.less now only contains color definitions and some overrides of certain rules from luma.
I'm not sure if ...
- 542
6
votes
Magento 2.2 LESS not compiling locally on Ubuntu
This should work:
rm -rf var/view_preprocessed
rm -rf pub/static/frontend
You don't have to run setup:static-content:deploy if you are in developer mode.
It's possible that the user created the ...
5
votes
Accepted
How to use Magento 2's LESS grid system
if you want to use grid system like magento admin, you need to follow below steps
copy below files/folder from
"vendor/magento/theme-adminhtml-backend/web/css/source"
a. utilities(folder)
b. ...
- 1,511
5
votes
Accepted
Magento 2 CSS Media Queries not working on
You are correct that when you place any styles in:
//
// Desktop
//--------------------------------------
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}
...
- 4,333
5
votes
Accepted
How to compile gallery and calendar css with grunt?
please follow below step to compile "gallery.less"
create "mage" folder under your theme
copy "gallery" folder from "root/lib/web/mage/gallery/" and put under "app/design/frontend/vendor(packagename)...
- 1,511
5
votes
How to configure the theme to use Grunt?
You can copy file /dev/tools/grunt/configs/themes.js to /dev/tools/grunt/configs/local-themes.js
Then edit Gruntfile.js file in your magento root folder :
At line 19, change dev/tools/grunt/configs/...
- 189
5
votes
Accepted
How to use bootstrap in my custom theme
You can add Bootstrap this way, follow below steps
1) Place your JS and CSS at below location
/app/design/frontend/vendor-name/theme-name/web/css
/app/design/frontend/vendor-name/theme-name/...
- 5,805
5
votes
How does Magento 2 work with CSS grunt-autoprefixer
Customize dev/tools/grunt/configs/autoprefixer.json and run grunt autoprefixer.
You need to setup it manually in you the deployment pipeline, b/c there is no way to run Grunt tasks from Magento.
- 1,252
5
votes
How does Magento 2 work with CSS grunt-autoprefixer
Please perform above changes, I hope it will work out well.
package.json
{
"name": "Project",
"author": "Vendor",
"description": "Node modules dependencies for local development",
"version": ...
- 1,336
5
votes
Accepted
Magento2 : How to override less variable value
You can override default less variables in your custom theme. In <magento-root>/lib/web/css/source/lib/variables/ you will find a number of LESS files.
In each of these you can find values ...
- 1,690
5
votes
Magento 2 less compilation error while setup:static-content:deploy
Update:
This is not a permanent fix, but to get your website back up & running,
/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout
Rename _tooltip.less to _tooltip.less-...
5
votes
Issue deploying Magento 2: Unable to get content
Make sure the lib folder is created properly (should be automatically created when composer installs magento/magento2-base) as that's where the css/source/lib/_lib.less file comes from.
You might be ...
4
votes
Difference between _module.less and _extend.less
The _extends.less with an S at the end within the Blank Theme, is a file where they created all the classes that can be extended via LESS later within the theme, without the need of creating new ...
- 423
4
votes
Override link color in custom less file, Magento2
Override variable value in your active theme's _theme.less file like below:
@link__color: red;
You can view all variables name for override in your theme _theme.less at <root_project>/lib/web/...
- 3,035
4
votes
Accepted
How add custom style max width 1024 Magento 2?
There is lib/web/css/source/lib/_responsive.less.
Define your screen variable in _theme.less in your theme.
And copy this file into your theme dir in:
web/css/source/lib/_responsive.less.
Add your ...
- 3,434
4
votes
Grunt watch doesn't watch _theme.less and custom less file
I looked into it … AND! finally the solution is too easy:
The Client Side and Grunt Compilation of *.less files REQUIRES the
@import directive to contain the file extension:
use @import '_test....
- 230
4
votes
How to add style rules to print.css
If you use a custom theme you can go to the theme's path:
app/design/frontend/YourVendorName/YourThemeName/web/css and do a file called print.less.
Into that file copy and paste the content from ...
- 86
4
votes
Accepted
How to use Magento 2's UI Library Layout LESS variables
ok, so @total-columns & @layout-column__sidebar-width work by setting the width side bar by dividing one into another.
If you check Luma's compiled style-l.css file, example.
You'll find all the ...
- 4,923
Only top scored, non community-wiki answers of a minimum length are eligible