If you are a front end developer in Magento 1 and trying to move to Magento 2 projects, you might have faced the challenge of the CSS changes not getting reflected in the front end. This happens because of a concept called “Less” which has been introduced in Magento 2.

With “Less”, the code has to be compiled and saved as CSS which is a static content and hence it’s not reflected immediately in the frontend. You might have tried to resolve this issue by doing multiple deployments and multiple cache flush which is a tiresome job and might not be the appropriate solution in many situations. There is a better way of handling this. The below solution will help you overcome this challenge. 

Windows users are advised to use terminals (like Putty/X-Shell) and MAC/Linux users can use the default terminal. Irrespective of the OS (like MAC, Windows, Linux etc), users are required to use the terminal in “sudo” mode as a root user.

‘Less’ Compilation Made Easier with ‘Grunt’ in Magento 2

Note : Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as  package.json and Gruntfile.js respectively

Step 1:  

Install node.js  (any location in your system)

Grunt modules are installed by means of npm ( Node.js package manager ), so you need to have a stable version of node.js

example: >= 0.8.0 (Odd version number are considered as an unstable versions).

Step 2:  

In order to start your Grunt installation globally, run this command 

npm install -g grunt-cli
Step 3:

Now we have to install the node.js in the magento root directory for the specific project that we are going to work with Grunt.

Next is to run the following commands

 

cd <your_Magento_instance_directory

 

npm install

 

npm update
Step 4:

In this step we are going to add your theme to Grunt configuration file, navigate to “dev/tools/grunt/configs/themes.js” and add you theme like below examples:

Example:

Now the installation process is completed, the next step is to run the Grunt commands.

  • grunt clean:<theme name>”  – this command removes all the static files of the css and js files in static directories 

    Example: “grunt clean:blank “

less compilation magento 2

  • grunt exec:<theme name>” –  this command republishes symlinks to the static directories

less compilation magento 2

  • grunt less:<theme name>” – this command compile all the css file us ing the symlinks in this location “pub/static/frontend/<Vendor>/<theme>/<locale>”

less compilation magento 2

  • grunt watch” – this is the final command to start the grunt tool to track the changes done to the main files like .less and recompiles into css files

less compilation magento 2

Every time you change any this in the source file, “grunt watch” will show notification in the terminal about the specific change and recompiles the changes simultaneously.

We hope you enjoyed our blog and learnt about the power of “Grunt” command which simplifies the job of a front end developer. If you might have any queries/thoughts, please feel free to add your valuable comments. We will be more than happy to help.

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

5 Comments on "‘Less’ Compilation Made Easier with ‘Grunt’ in Magento 2"


Guest
Ajay Varma
10 months 6 days ago

Thank you, I’ve just been looking for info about this subject for ages and yours is the best I’ve found out till now. However, what in regards to the bottom line? Are you certain in regards to the source?

Guest
SHESHAGIRI ANVEKAR
1 year 2 months ago

Very Use full Article , Written in Simple words, which makes easy to understand the topic .. keep it up

Siva Kumar
Author
1 year 1 month ago

Hi Sheshagiri,
Thanks so much for your appreciation.
Please keep reading our blogs. Also, do let me know what kind of blogs do you like to read.
Please subscribe to our blogs.
Thanks.

Guest
Dileep Kumar
1 year 6 months ago

module.exports = {
blank: {
area: ‘frontend’,
name: ‘Magento/blank’,
locale: ‘en_US’,
files: [
‘css/styles-m’,
‘css/styles-l’
],
dsl: ‘less’
},
Same theme another language how to configure it

Siva Kumar
Author
1 year 6 months ago

Hi Dileep,

Thanks for your mail.
If it is same theme but a different language, then please make the change in locale:(language code).
For e.g., if the language is French, then the code is locale:’fr_FR’
Please let us know if this resolved your issue.
Write to us if you have any further queries.
Thanks & subscribe to our blogs.