Module LESS results are different depending on use of grunt or setup:static-content:deploy

Question

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.

UPDATE:

---

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.

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