Less compilation modes in Magento 2: what is the difference and how to configure them?

Magento 2 allows you to compile the .less files by using one of these 3 modes: 

• server-side Less compilation.
• client-side Less compilation.
• compilation via automatic tools.

Let’s see how they differ.

→ Need a hand with custom development? Our team is ready to help you out. Learn more about our Magento Custom Development Service.

Server-side Magento 2 Less compilation

This is a default Magento option. The system compiles files using the Less PHP library: 

• the Less preprocessor checks if there is a requested .css file. If it doesn’t find the file, it moves to the next step;
• then it looks for the same file with the .less extension using the Magento fallback mechanism. If it doesn’t find the needed files, the Magento 2 compilation will be disabled. If it exists, the preprocessor moves to the next step; 
• it reads .less file contents and resolves @magento_import and default Less @import directives;
• the preprocessor uses the Magento fallback to transform all paths in .less files into relative paths; 
• after this, it copies all the files to var/view_preprocessed/less and processes them recursively;
• source files are passed to the PHP Less compiler. Ready .css files located in pub/static/frontend/<Vendor>/<theme>/<locale>.

Client-side Magento 2 LESS compilation

This mode allows you to see simple changes made in the theme right after saving them and refreshing the page. The workflow of this process is very similar to server-side Less compilation. The main difference is only in the last step. The client-side mode publishes the following files to the pub/static/frontend/<Vendor>/<theme>/<locale> folder:

• .less files with resolved @magento_import directive
• symbolic links to the root source file without @magento_import
• symbolic links to all imported .less files 

Since LESS files are compiled after every page reloading, it may create too big JS files and decrease store performance.

Compiling via automation tools

The third option that Magento 2 offers is compilation via Grunt. This is a tool that can perform routine tasks like compilation automatically. Learn more about its configs from the Magento official documentation.

How to set up Less compilation mode?

To set up one of the options, follow these steps:

Step 1. Log in to your admin panel and go to Stores > Settings > Configuration > ADVANCED > Developer.

Step 2. Open the Store View dropdown and choose the Default Config option.

Step 3. Then expand the Frontend development workflow section and choose the needed compilation mode in the Workflow type field.

Step 4. Save the changes.

Is .less not compiling in your Magento 2? Check how to fix it in the official guide.