Use Compile LESS with Grunt in Magento 2
we use less for css, and apply css in our new theme module.
So, In this tutorial, we learn How to Use Grunt in Magento 2,
let’s start with grunt.
first go Magento 2 Developer Documentation, open “Compile LESS with Grunt” topics.
Follow step:
Let’s start one by one step:
Before we follow step we add following file:
–Gruntfile.js(already there)
–package.json(rename sample.package.json into package.json)
(1)Install node.js and add our machine.
(2) we will install Grunt CLI tool globally. using following command.
npm install -g grunt-cli.
(3)refresh the node.js project dependency, including Grunt, for our Magento instance. use by following command.
npm install
npm update
(4)Add our theme to grunt configuration.
Go, dev/tools/grunt/configs/themes.js and add our theme
demotheme: { area: 'frontend', name: 'Magecheckout/demotheme', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' },
Set environment for node.js
copy : C:\Program Files\nodejs
And
Go : computer > properties > Advanced System Setting > Environment variable
Set : variable name : PATH
variable value : C:\Program Files\nodejs
use following command in our PowerShell and run our theme
grunt -vvv exec:demotheme
clean cache : php bin/magento cache:clean
change css in _theme.less
Now try to grunt watch command:
grunt watch
