Hot answers tagged

75 votes
Accepted

How do you override LESS in a custom theme?

Note 1: This will always assume you are extending magento-blank. Note 2: <theme-dir> is app/design/frontend/Vendor/theme/ The basics: Changing Base Variables (for tl;dr, skip to conclusion) ...
user avatar
  • 3,232
50 votes

Less files in custom modules

You need to upgrade the source to include the @import command in the style-l.less file with:- php bin/magento setup:upgrade Then you need to deploy static content to compile your less files with:- ...
user avatar
26 votes
Accepted

Difference between _module.less and _extend.less

The answer is somewhat hidden in the Magento docs: Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles. ...
user avatar
  • 410
21 votes
Accepted

@media-common - Why do we need to use this?

Magento 2 follows Mobile First approach and @media-common = true was designed to define styles that are base (mobile) and must be present in styles-m.css. If you drop this declaration styles will be ...
user avatar
  • 326
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/...
user avatar
  • 385
18 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 ...
user avatar
  • 780
17 votes

Overriding Blank Theme Styles in Magento 2

The 2 ways recommended by Magento to override or extend the styles from a parent theme: 1. Simple way Extend: In your theme directory, create a web/css/source sub-directory. (You've already done ...
user avatar
  • 1,579
11 votes
Accepted

Accidentally deleted .htaccess file inside pub/static folder

You can download corresponding file from the official Magento 2 repository. That will solve your problem.
user avatar
10 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/...
user avatar
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 ...
user avatar
  • 5,719
9 votes
Accepted

Child Theme Change Colors - Less Mixins in Magento 2

You can get all color variables from the /lib/web/css/source/lib/variables/_colors.less file. And you can add your own color variables into /app/design/frontend/Vendor/Theme/web/css/source/_variables....
user avatar
  • 1,622
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’...
user avatar
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 ...
user avatar
  • 9,499
7 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 ...
user avatar
  • 2,938
7 votes
Accepted

How to utilise the existing LESS variables in my new less file

As you already figured out how to use the variables, I'll briefly explain the 2 ways recommended by Magento to override or extend the styles from a parent theme: 1. Simple way Extend: In your theme ...
user avatar
  • 1,579
6 votes

Overriding Blank Theme Styles in Magento 2

I had a similar problem using Foundation. The official way to do this is to override the specific module's less file and modify the css there. It will then be picked up by Magento during compilation ...
user avatar
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 ...
user avatar
6 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. ...
user avatar
  • 4,153
6 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 ...
user avatar
  • 2,441
5 votes

Less files in custom modules

I searched all Magento modules for .less files, and found none, which suggests to me that LESS is reserved to themes, and not modules. You CAN write CSS for your module, however. I found an example ...
user avatar
  • 3,232
5 votes
Accepted

Fatal error: Unable to find Gruntfile

You always need a Gruntfile.js to run grunt (as far as I'm aware) so if you don't have this file in your root directory I'm fairly certain this is the cause of your problem. I think the only purpose ...
user avatar
  • 15.2k
5 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 ...
user avatar
5 votes

How to create custom less file? magento 2

Just add new file named breakpoint.less at below path: app\design\frontend\<Vendor>\<Themename>\web\css\source\ and import this file in _sources.less file given path below: app\design\...
user avatar
5 votes

Create new M2 breakpoint with .media-width mixin?

Figured it out. So, I was correct in assuming that the .media-width mixin behaves like a switch statement. The mixin appears to do a truthy check for the parameters that are passed (@extremum and @...
user avatar
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. ...
user avatar
  • 1,441
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) {} ...
user avatar
  • 4,153
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)...
user avatar
  • 1,441
5 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 ...
user avatar
  • 522
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/...
user avatar
  • 5,719
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.
user avatar
  • 1,252

Only top scored, non community-wiki answers of a minimum length are eligible