Magento – See less source files in chrome dev tools

cssgruntlessmagento2

How do you see the less file that is generating the style in chrome dev tools?

enter image description here

working in developer mode, in less.js:

var lessOptions = {
    options: {
        sourceMap: true,

and in config.less.js:

less = {
    env: "development",
    logLevel: 0,

but still the source is not present, only some style tags that are directing to the generated style.css

I have enabled sourcemaps in my devtools. I am using client side workflow.

Best Answer

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:

enter image description here

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.

Related Topic