You must NOT modify or compile any .less files unless the DEVELOPER mode is enabled for your Magento store.
Using Grunt to compile your less files is the most reliable and effective way to eliminate the possible Magento errors. It allows you to see changes to CSS immediately.
1. First, you need to log in to magento server. The next step is to install the node.js and npm on your server.
- Windows: cinst nodejs.install(for Chocolatey), scoop install nodejs (for Scoop)
- Arch Linux: pacman -S nodejs npm
- Void Linux: xbps-install -Sy nodejs.
- MacOS: brew install node
You can find the instructions on how to install node.js via package manager (Ubuntu, CentOS, Fedora, Red Hat, Windows) here.
2. Then you need to rename gruntfile.js.sample file to gruntfile.js (remove .sample from the file name).
Do the same for package.json.sample file. By this action you’ll activate the files.
You should get 2 files renamed:
- gruntfile.js
- package.json
3. Open the dev/tools/grunt/configs/themes.js file to edit and add your theme to Grunt configuration, as in the example:
- “theme106” is Flash theme number. Replace “106” with your theme number.
- “Zemez” is the theme vendor name, either Zemez or TemplateMonster. You can check the vendor name in the app/design/frontend folder.
- “en_US” is locale, if US store – en_US, if german – de_DE, if russian – ru_RU, etc.
4. Move back to command line, now you need to install grunt-cli component globally.
Hint: Use cd ../ to move up one directory.
In your Magento store root directory (cd /path-to-your-magento-installation-folder/) and execute the commands below:
After that you can start editing the .less files.
5. Run this command to remove previously generated static files:
6. Then do the following:
This will collect  .less sources (to style-m.less і style-l.less) and generate static files.
7. Use this command to compile .css files (less to css) with the help of the symlinks in pub/static/frontend/Zemez/themeXXX/en_US folder (XXX – is your theme number).
