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
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