Magento 2: How to use Grunt properly for CSS changes

Question

I'm trying to figure out the clusterf-ck which is the Magento 2 front-end theming workflow. And I've read and understood all documentation, read all the blogs about it and are up to date on the latest developments. I know it's a hassle to make changes to the styles, and that is the reason Magento decided to implement Grunt, to make this a easier process. But here is where things go wrong;

I use grunt watch:theme; it registers and compiles all my changes just lovely. But it doesn't clear out the pub/static files, so no changes are visible (in other words; a useless function?)

Then there's grunt clean:theme which cleans "everything" to apply made changes. But whenever I make changes and use this command; no changes! This one only works in combination with rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ so what's the idea here?

And when I try grunt less:theme I get an error, which is the first lead I've had so far but no idea what to do with it;

Running "less:theme" (less) task
Destination pub/static/frontend/vendor/theme/en_EN/css/source/_extend.css not written because no source files were found.

Some further info; I've setup a child-theme of the blank default, added my _extend.less in the vendor/theme/web/css/source/ folder. As said before, grunt sees my changes and eventually if I use the grunt clean and clear out the var they do get applied. But this is really time consuming and I simply can't believe there isn't a quicker way to do this. I figure it's something to do with the aformentioned error. Anyone has an idea?

Answer 1

I finally figured it out as seen in this topic. At the time I posted this question my main feat was the error (".. no source files were found"). This was solved by running setup:static-content:deploy because the files I had linked in my Grunt config weren't yet deployed to the pub/ folder.

After solving that issue I ran into another (of course) that my Grunt config would see the changes and compile them, but they didn't show. This was eventually due to missing the parent style (style-m) in my Grunt config. More info on that issue in the Github link mentioned before.

Answer 2

Make sure you are running in developer mode, and client-side compilation for development. When you are running in both these modes you only need to clear pub/static and var/view_preprocessed when you add a new file to your theme, changes will be picked up on page refresh.

If your changes still don't apply then ensure Varnish isn't caching your less files, that's one problem we had.