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


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.

  • Have you got Magento 2 set to developer mode, and enabled client-side compilation?
    – Ben Crook
    May 7, 2016 at 10:24

1 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

  • 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.
    – fracture
    May 9, 2016 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.