Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Getting Started with LESS , Gruntjs and Magento2

    Getting Started with LESS , Gruntjs and Magento2 – Magento contains strong set of tech stacks specially for front end developers . with a little introduction i will explain how to setup grunt and compile less files using gruntjs  .I will not explain much in details about LESS or Gruntjs but will explain more on setup and running and exeuting less files on grunt . As magento2 officially support less and grunt its inevitable to have strong knowledge in both of them .

    GruntJs is a task runner and useful in various task including compiling css preprocessors (LESS/SCSS files) ,  minification , compression and many more . NPM need to be installed to install grunt or grunt plugins

    Install Grunt as per the guide provided by standard

    npm install -g grunt-cli

    as for sample run you need to manage  your CSS and LESS folder , e.g


    as you can i have created three folder grunt , css and less .

    css – here the css will be generated

    less – source location for less files

    grunt – i have created folder to store gruntjs file with package.json file and plugins which will be downloaded via package.json . Example

    now add the following code in your Gruntfile.js file


    now create package.json file and add following code in it

    now from command line run following command

    npm Install 

    and grunt lib will be added

    lets add style.less file in less/style.less

    now run the command from terminal

    grunt less

    and check the style.css under css folder

    You will see grunt compiled less file and css output is in the css file

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again