Less Compilation with Grunt:
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
sudo apt install nodejs
Check installed with version using
Install Grunt tool Globally
npm install -g grunt-cli
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.
To do this, run the following commands in a command prompt:
- Add your theme to Grunt configuration. To do this, in the
file, add your theme to module.exports like following:
Note: Here theme name is Samplelesstheme & vendor name is V4U.
Now the installation process is completed, the next step is to run the Grunt commands.
- grunt clean: -Removes the theme related static files in the pub/static and var directories.
- grunt exec: -Republishes symlinks to the source files to the pub/static/frontend/// directory.
- grunt watch: -Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser pages (you need to have LiveReload installed for you browser)
You can directly use your less in _extend.less by importing.
because It is already defined in 'dev/tools/grunt/configs/less.js'
line no 48 like
module.exports = _.extend(themeOptions, lessOptions);
If you find any error like
Fatal error: Port 35729 is already in use by another process.
Then close the terminal and again run the command