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:


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.

Does your eCommerce website need high performance and scalability? Switch to Magento 2 and begin your brand new website implementation with our Magento Services. Let’s Talk.


  • Siva Kumar

    Siva is a UI/UX Designer at DCKAP. With a motto of ‘Just Do It’, Siva is eager to fix any complex bugs. He's passionate about creating clean, unique, elegant designs - the designs you love & designs that work. He enjoys nothing more than spending quality time with friends.


Ready to drive online revenue

Get In Touch

5 thoughts on “‘Less’ Compilation Made Easier with ‘Grunt’ in Magento 2

  1. 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?

    1. 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.

  2. module.exports = {
    blank: {
    area: ‘frontend’,
    name: ‘Magento/blank’,
    locale: ‘en_US’,
    files: [
    dsl: ‘less’
    Same theme another language how to configure it

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *