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