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.
Best Answer
I have to run
grunt exec
beforegrunt watch
will read my changes correctly. As of how my system is set up, the common styles get complied down to thestyles-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