Skip to main content
Magento Front End

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

By August 30, 2016January 3rd, 2022No Comments

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

 

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:”  – 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:” –  this command republishes symlinks to the static directories

less compilation magento 2

  • grunt less:” – this command compile all the css file us ing the symlinks in this location “pub/static/frontend///

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

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

More posts by Siva Kumar

Discover What You’re Missing

Get the weekly email full of actionable ideas and insights you can use at work and home.