How To Integrate LESS CSS In Magento 2?

4 min readJun 7, 2020

Magento 2 comes with many new features. Less CSS is one of them. Less stand for dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client-side or server-side.

Why Use LESS?

The difference between LESS and CSS lies in the syntax because the LESS syntax is a little different from CSS. The stylesheet language is a CSS preprocessor.

LESS is a more normalized format, as compared to CSS; we can use different elements like Variables, Mixins, Nesting, etc. Here is an example;

How Plain CSS And Less CSS Look Different?

.main-section {
position: relative;
padding: 20px 0;
margin: 0 0 15px;
background: #cccccc;
}
.main-section > .navigation
// Variables
@grey-color: #cccccc;
@padding: 10px 0;
.main-section {
& {
position: relative;
padding: @padding;
margin: 0 0 15px;
background: @grey-color;
}
> .navigation {
display: block;
padding: @padding;
width: 100%;
font-style: 15px;
color: @grey-color;
&:hover {
text-decoration: none;
color: @grey-color;
background: @grey-color;
}
}
}

How To Configure LESS CSS On Server?

Before we start with Less, we need to install Node.js on our server. Please follow these steps to install Node js on your server.

Install Node.js On Server

Before you begin the process of installation, go to the Magento root directory and rename the existing files package.json.sample and Gruntfile.js.sample in your Magento root folder as package.json and Gruntfile.js respectively.

Go to your Magento root folder and then run the below command to setup and update NPM.

When the installation is complete, the node_modules folder will automatically appear inside the root folder of Magento 2.

Run the below commands to install Grunt CLI

npm install -g grunt-CLI

Add Your Theme In Grunt Configuration File

Open file [Magento_ROOT]/dev/tools/grunt/configs/themes.js

You will see that the default Magento theme is already there. Add your theme below the Magento theme, as shown below

Create .less File And Compile With Grunt Commands

[Magento_ROOT]/app/design/frontend/[VENDOR]/[THEME]

Create below path if you have not created yet

Web/CSS/source
Create _extend.less & _custom.less
Include _custom.less file in _extend.less as @import ‘_custom.less’

LESS Compilation

Once you are done with the above steps, you can check the grunt status and compile CSS using the below commands.

You need to make sure that you run the commands from your Magento installation directory to avoid any unforeseen circumstances.

grunt clean: demo
Removes any static files that are theme-related. You must remove it from pub/static and var directories.
grunt exec: demo
You must re-publish all the symlinks to the source files to the pub/static/frontend/ directory.
grunt less: demo
Compile all the.CSS files using the symlinks that are published in the pub/static/frontend/ directory
chmod 0777 -R var/* pub/static/* generated/*
grunt watch
To track the changes in the source files, recompiles.CSS files, and reload the page in the browser

LESS File Compilation Mode

There are two types of compilation mode:

Server-side Less Compilation Mode
Client-side Less Compilation Mode

Server-side Less Compilation Mode

Server-side less compilation mode is a default compilation mode that can be used in both developer and production but has some limitations in the server-side less compilation mode.

To change the mode, you must follow this path:
(Stores > Configuration > Advanced > Developer) Frontend Development workflow.

Here are the steps that show how to lessen the preprocessor’s work in our server-side compilation mode;

Preprocessor checks if the requested CSS file is not found in the directory. If the CSS file is found then stop the CSS file execution and proceed to the next step.
On the off chance that CSS record isn’t discovered, then the LESS preprocessor finds the file of the same name with .less augmentation. If LESS records are not discovered, then its execution generally continues to the next step.
Read the .less file contents, and resolve all @import directives. For example

//@Magento_import ‘source/_module.less’; // Theme modules
//@Magento_import ‘source/_extend.less’; // Extend for minor customization
[Magento_ROOT]/var/view_preprocessed/less
[Magento_ROOT]/pub/static/frontend/directory.

So, the above processes are to generate CSS files from LESS using the PHP LESS compiler.

Client-side Less Compilation Mode

Client-side less compilation mode flow the same as in both (developer and production) mode.

In Client-side LESS compilation mode, the compilation process is performed over the client (browser). The files are then published to;

[Magento_ROOT]/pub/static/frontend/Vendor/theme/locale directory:
[Magento_ROOT] source (.less) files with resolved @Magento_import directive.

Symlinks do not contain any @import files at the time of execution.

Recursively, all the symlinks are imported by all the @Magento_import and @import directives.

Wrapping-Up

We hope that this blog helps you in integrating LESS CSS in Magento2. While this blog just scratches the surface on Magento 2 integration, it is a start. Watch this space for more informative content on various IT related topics. Feel free to drop a comment in case of any query.

Originally published at https://www.zealousweb.com.