I am tying to break up my CSS, in a rather big module, so that it is easier to find the CSS I need. I have done something like the following in my _module.less:

 @import "module/_first-less";
 @import "module/_second-less";
 @import "module/_third-less";

It works fine if I run grunt commands and compile with grunt directly. However, when running bin/magento setup:static-content:deploy -f like you would on production server (without -f obviously) it seems to pick and choose what to apply out of them imports. I have checked other modules and I have seen similar being done elsewhere so I am a bit confused as to why this isn't working out for me.

I am running magento in Developer mode just in case that is any extra help.


After further testing it doesn't look as if @import is the issue. I have consolidated all the LESS into the one _module.less & have the same issue. While using grunt the styles are all perfect. The issue is during bin/magento setup:static-content:deploy.

1 Answer 1


Believe it or not the following change fixed my issue:

- .media-width(@extremum, @break) when (@extremum ="max") and (@break =@screen__m) {. . .}
+ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {. . .}

I'm not sure why one compiles fine and the other has issues it might be related to this issue: https://github.com/magento/magento2/issues/7231

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.