How to Use LESS in Magento 2
Table of Content
Use of LESS in magento 2
Today I am going to explain the use of LESS in magento 2 in this article. I assume you know what is LESS, if not then please go through the blog – What Is Less ? first before reading this article.
Also, You can read our blog to know about the advantages of using LESS.
Now, the question is – How LESS files are compiled in magento 2 ? Or How LESS pre-processor generates CSS in magento 2 ? So today I am going to discuss these mechanisms for magento 2. I assume you know now how the LESS files are created.
So lets take an example of magento blank theme. In blank theme following css files are included in head:
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
These Css source files should be located under :
<Magento_Blank_theme_dir>/web/css/styles-m.css
<Magento_Blank_theme_dir>/web/css/styles-l.css
<Magento_Blank_theme_dir>/web/css/print.css
But if you will navigate into above paths, you will not find any CSS files with these names.
So, the next question is – then from where these CSS files loads on the browser ? I will explain this.
When you navigate to above paths you would not find CSS files there, but you must find the files with same names with .less extension instead of .css, right?
Like I say you found the following files :
<Magento_Blank_theme_dir>/web/css/styles-m.less
<Magento_Blank_theme_dir>/web/css/styles-l.less
<Magento_Blank_theme_dir>/web/css/print.less
From here the magic starts. When magento did not find the CSS files you mentioned in your handles, then it will look for the same files with .less extension.
Moving towards the next question must raising in your mind is HOW?
So in magento there are two modes to compile .less files to .css :
First is – Server-side LESS compilation
and Second is – Client-side LESS compilation
Now I am going to explain both modes one by one.
Server-side LESS Compilation
This is the default compilation mode set in magento settings under (Stores > Configuration > Advanced > Developer) Frontend Development workflow. This mode can be used in both : developer and production mode but with some limitation.
In Server-side LESS compilation mode, the compilation is performed over server using LESS PHP library . Now following are the steps to describe how LESS pre-processor works in Server-side LESS compilation mode.
Step 1 : LESS pre-processor checks if the defined CSS file is found in the relative directory or not. If CSS file is found then it stops its execution otherwise proceed to the next step.
Step 2 : If CSS file is not found, then LESS pre-processor finds the file of same name with .less extension. If LESS files are not found then stops its execution otherwise proceed to next step.
Step 3 : Reads .less file contents and resolve all @import directives (if any)
Step 4 : Resolves all paths of LESS files using Magento fallback mechanism and put LESS files under /var/view_preprocessed/*
Step 5 : All source .less files are parsed to PHP LESS compiler and then it generates relative CSS files to pub/static/frontend/<Vendor>/<theme>/<locale>/
So this is the whole process to generate CSS file from LESS using PHP LESS compiler. Now the next question raised here is – how LESS preprocessor works in Server-side compilation mode with developer and production mode whenever you made any change in LESS file ? So I am also going to explain this in details.
In both (developer or production) mode, You need to clean following directories every time you make changes to less files :
-pub/static/frontend/<Vendor>/<theme>/<locale>/
–/var/view_preprocessed/*
And then In Developer Mode :
by loading the page only, the PHP LESS compiler will process .less files into .css files.
But In Production Mode :
You need to deploy the CSS by using following command in your terminal :
php bin/magento setup:static-content:deploy
and then you can see the changes at frontend.
Now we are proceeding to next compilation mode, i.e. Client-side LESS compilation mode.
Client-side LESS compilation mode
To set this mode you need to navigate in magento admin under (Stores > Configuration > Advanced > Developer) Frontend Development workflow and then set Client-side LESS compilation mode and then click on button Save Config.
Client-side LESS compilation mode works same in both (developer and production) mode. In Client-side LESS compilation mode, the compilation is performed over client (browser) using lib/web/less/config.less.js and lib/web/less/less.min.js files.
This is similar as server-side LESS compilation, but the difference is, it publish pub/static on the last step (after reloading the page).
In client-side LESS compilation .less files are published to pub/static/frontend/<Vendor>/<theme>/<locale> directory. Also resolves @import directives with root source (.less) files. Whenever you make any changes to LESS files and reloads the browser, the changes are reflected immediately after reloading the page.
The CSS created dynamically when you load the page. You do not need to clear pub/static/frontend/<Vendor>/<theme>/<locale> every time you make any change in LESS file, But if you do any changes in root source files that contain the @import directive where the imported file is specified without extension.
OR if you rename, remove, or add a .less file imported with a @import directive but you did not correct the directives accordingly, so you will need to clear the pub/static/frontend/<Vendor>/<theme>/<locale> directory.
That’s all for today in this article, hope it will help you to use LESS in magento 2. Try this and if you have any queries then just comment below 🙂
Hope this blog will help you in Magento 2 development, you can also check our Magento 2 theme development service to create quality and custom themes along with Magento 2 modules.