5

I got the following theme inheritance setup: Vendor/Retail inherits from Vendor/Default which inherits from Magento/blank

When compiling the styles with grunt I get no issues. When compiling with server-side compilation some of the blank theme's styles are missing.

I.e. vendor/magento/theme-frontend-blank/Magento_CatalogSearch/web/css/source/_module.less or vendor/magento/theme-frontend-blank/web/css/source/_layout.less

Will be included when compiled with grunt but dropped when compiled with server-side compilation.

I'm drawing a bit of a blank here. Does anyone have an idea what's going on here?

Edit:

I dug into it more and found that it actually only drops the styles that are wrapped in media queries. The common styles are applied. So styles wrapped in:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m)

will be dropped and not show up in styles-l.css. While styles wrapped in:

& when (@media-common = true) {

will show up in styles-m.css.

This only applies to styles from the blank theme. Styles wrapped in media queries from the child theme are not affected by this issue.

1

I finally figured it out. In case someone else runs into the same problem I'll post the solution. The server side asset compilation doesn't support double quotes in the .media-width() mixin arguments.

I.e.:

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

will work fine when compiled with Grunt but not at all when using the server side asset compilation.

To make it work on both you need to use:

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

0

Check the less "imports" in your custom themes. They all must match the pattern @import 'foo/_bar.less';

Pay attention at two things:

  1. File path must be wrapped in single quotes ('), not in double quotes (")
  2. File path must end with ".less"
  • 1
    Doesn't look like this is the issue. The @import statments are correct. Thanks! – Michael Thessel Sep 12 '19 at 23:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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