0

As part of creating a custom theme, and partially following the guide on the Magento site, I added a LESS file at:

<theme-dir>/Vendor/theme/Magento_Customer/web/css/source/_extend.less

When I view the CSS in Firebug, it looks like all of my styles from this new file are being used twice on the same element, as if its including _extend.less twice.

see example

About my setup:

  • Magento is in Development mode
  • LESS compilation is set to client-side
    • I confirmed I am still seeing this with server-side compilation
  • Cache is disabled

Why is this happening?

3
  • I think it's due to the client-side compilation, it seems to add the same code twice. I think it's related to debugging tools. You can confirm by setting it back to server side.
    – Ben Crook
    Apr 20, 2016 at 19:41
  • After switching to server-side compilation (and clearing static files, cache, indexing), I am still seeing my styles double-included
    – andyjv
    Apr 21, 2016 at 17:35
  • Hmm, to try and debug I can think of: - If you inspect the code and search for '.css' are there any duplicate CSS files? - Look at the css files and check if the duplicates are actually there - Have you extended or overwritten styles.less (or styles-l/styles-m)
    – Ben Crook
    Apr 21, 2016 at 18:43

2 Answers 2

1

Looking into this a bit more I think it's down to styles-l.less and styles-m.less as they both import the same code unless specified with the @media-common variable.

You can read more on this by going to file:///**PATH-TO-LOCAL-MAGENTO-2-INSTALL/lib/web/css/docs/responsive.html - I need to access this on my OS and not within the virtual box. I also need to open it in Firefox as it's buggy in Chrome.

The relevant section is:

Media query style groups separation variables

@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
  }

@media-target: all|desktop|mobile - Sets target device for styles output

  & when (@media-target = 'mobile'),
  (@media-target = 'all') {
     @media only screen and (max-width: (@screen__xs - 1)) {
         .media-width('max', @screen__xs);
     }
 }

Gathering

Everything that you include in collector mixins above will go in place where they declarated. As example all

  .media-width(@extremum, @break) {
      your code
  }

Will go to

  .media-width(@extremum, @break));

Example

I've taken this example from var/view_preprocessed/css/frontend/PartyShowroom/default/en_GB/Magento_Catalog/css/source/_widgets.less

Desktop and mobile

& when (@media-common = true) {
    ... LESS HERE ...
}

Mobile

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = 
    @screen__s) {
        ... LESS HERE ...
    }

Desktop

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

TL:DR

You can use the @media-target variable to set whether to output that code block to styles-l.css, styles-m.css or both.

More info can be found in:

  • var/view_preprocessed/css/frontend/**STORE-NAME**/**THEME-NAME**/en_GB/css/source/lib/_responsive.less
  • file:///**PATH-TO-LOCAL-MAGENTO-2-INSTALL/lib/web/css/docs/responsive.html
2
0

Here is the note from devdocs

If working on a theme which inherits from either the Blank or Luma theme, it’s recommended to use .media-width() and style groups separation. Otherwise the style rules will be added twice, once to styles-m.css and once more to styles-l.css.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/responsive-web-design/rwd_css.html

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .