Magento 2 LESS to CSS files not updating
Magento 2 has some pretty neat updates from Magento 1. One of those obvious changes is the usage of LESS.
LESS is a CSS pre-pocessor scripting language (you can use functions/variables for your CSS) that creates compiled CSS files. Think of a programming language where you have to compile the code before you can use the program.
That’s straight forward enough if you ignore Magento entirely for the minute:
General work flow: 1) update your .less
files, 2) compile it and 3) watch it generate the .css
file with your changes.
With Magento 2 and developer mode set (more on dev vs production and css later), you more or less (lol) follow the above work flow.
However you’re here because you’ve done the above and used Magento’s deploy command to refresh the css files without luck. i.e.:
php bin/magento setup:static-content:deploy
Why didn’t it generate the new CSS?
Because the above command does not automatically clear out one of the vital folders used for compiling .less
files:
var/view_preprocessed
It looks like Magento first copies the .less
files to the above folder (after going through the hoops of fallback system to locate files).
It then generates the CSS based on the .less
files copied there. Running the setup:static-content:deploy
command does not clear out the var/view_processed
files – so you will have to do that manually.
rm -rf var/view_processed
Then when you run setup:static-content:deploy
it will generate the updated .css
files with the updates you were hoping for (the command should also take longer to run!).
Explained in a digram