& when (@media-common = true) - Changes not picked up unless I do static-content-deploy

Question

In the Magento 2 lib documentation it contains the following:

@media-common: true|false - sets whether to output common styles. For common styles every time you want to add some styles you should use

& when (@media-common = true) {
 your styles
}

Question

What determines when these blocks are processed?

While working in a module's less file e.g. _module.less, It seems to be ignored if I trust either grunt watch, or run grunt less manually, unless I first run bin/magento setup:static-content:deploy

Changing between the production ( with or without the --skip-compilaiton flag) and developer deploy modes seems to make no difference.

This isn't ideal as setup:static-content:deploy is very slow and disrupts the workflow.

• Ben Crook: Have you got Magento 2 set to developer mode, and enabled client-side compilation?

Answer 1

I have to run grunt exec before grunt watch will read my changes correctly. As of how my system is set up, the common styles get complied down to the styles-m.css file that get generated to the <site-root>/pub/static/frontend/<vender-namespace>/<theme-name>/en_US/css/styles-m.css

And this follows the magento claim for a mobile first design, any styles in the .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {} media query will not load in this file, reducing the weight of the total css files.

This page talks about it some more: Magento 2 Docs

And some examples: Magento 2 UI Library

• fracture: Thanks, that speeds things up a lot. It's still a very slow workflow though. I hope there are some improvements from Magento in this area soon.