Magento – Magento 2 and Client Side Less Compilation

less-cssmagento-2.1magento2theme

I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.

My custom theme is active on my store and it works, I can create my own styles and template files and all is good.

I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.

I am using Chrome as my development browser.

Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.

This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.

Best Answer

You should use Server side less compilation with Grunt.

STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation

Remember to delete the static content and deploy again.

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

Magento – See less source files in chrome dev tools

From what i have been able to figure out through testing is the map files that are used by the browser is linked to the use of grunt. When i set up a custom theme on my site, i can switch over to that theme and the files will compile correctly and my custom less files will show up on the front end fine. But the browser won't show the actual .less files that my styles are coming from, just styles-m.css and styles-l.css.

When i set up the theme's styles to be compiled by grunt:

theme: {
    area: 'frontend',
    name: '{vendor_namespace}/theme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

in the file dev/tools/grunt/configs/themes.js and run the task cocktail of:

grunt clean
grunt exec
grunt less

i get this result:

On more thing to note. I thought that there were map files that i saw in earlier versions of M2 (i'm on 2.1.4 right now). These files seem to be missing and now i'm seeing this posted in the bottom of the compiled styles-m.css and styles-l.css files in the pub/static folders:

/*# 
sourceMappingURL=data:application/json;base64,
eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9w...........
*/

Which would inply that there is a base 64 url generated to the actual map file that is then read by the browser. Haven't tracked that down yet, as it would be the next piece of the puzzle, but since this is working, it will have to wait for another day.

Best Answer

Related Solutions

Magento2 Theme LESS – Is LESS Getting Included Twice?

Media query style groups separation variables

Gathering

Example

TL:DR

Magento – See less source files in chrome dev tools

Related Topic