My LESS sourceMap file is missing the "file" when run through grunt

Question

When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in:

...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"}

However, when I run grunt less, the styles.map is missing the "file" part and just ends in:

...AV2rEF;EAAiB,aAAA"}

This stops the SourceMap from working. What could be going wrong? My less config is as follows:

less: {
    dist: {
        options: {
            sourceMap: true,
            sourceMapFilename: 'styles.map'
        },
        files: [{
            src : 'assets/less/00_style.less',
            dest: 'dest/assets/prod.css'
        }]
    }
}

RobC · Answer 1 · 2017-02-28T12:04:27.910

Short answer:

Add the following additional option to your less Task in Gruntfile.js:

...
options: {
    ...
    sourceMapURL: '../../styles.map'
},
...

Long answer:

When running the lessc command via the CLI, (as per your example), notice the the following comment is written to the resultant prod.css:

/*# sourceMappingURL=../../styles.map */

However, when running the grunt task, (using your current config), the following comment is written into the resultant prod.css:

/*# sourceMappingURL=styles.map */

Note the missing ../../ - therefore prod.css can't find styles.map

This is why your SourceMap isn't working and not so much to do with the "file:" missing in styles.map when run via grunt. The .css file ultimately points to the .map file - not vice versa.

Even after running the lessc command via the CLI then deleting the "file:" part from styles.map you will find that the SourceMap still works in the browser. Indicating that the "file:" part, whether included in the .map file or not, has no effect on preventing the SourceMap from working.

Besides, as noted in the most recent proposed SourceMap spec (v.3) the "file:" part is optional:

Line 3: An optional name of the generated code that this source map is associated with.

Explicitly defining the sourceMapURL in your grunt Task options will entail having to keep a flat folder structure inside the dest/assets/ directory if you intend on using multiple .less files. (I.e. You'll need to avoid saving any resultant .css files in subfolders)

My LESS sourceMap file is missing the "file" when run through grunt

1 Answers1