grunt-contrib-less: sourceMap options generates incorrect sourceMapUrl

When calling lessc directly, the sourceMappingURL is correctly generated as:

.\node_modules\.bin\lessc.cmd ./src/css/modern.less ./src/css/modern.css `
>>> --source-map

/*# sourceMappingURL=modern.css.map */

when using grunt-contrib-less the sourceMappingURL is incorrect:

     less: {
         release: {
             options: {
                 sourceMap: true
             },
             files: [
                 { src: ["./src/css/modern.less"], dest: './src/css/modern.css' }
             ]
         }
     }

results in:

/*# sourceMappingURL=./src/css/modern.css.map */

I believe both of these should be generating the same sourceMappingURL.

This is important as my files are served from /css , not /src/css/, additionally I have many less files that need to be compiled to css, and each needs its own map file, therefore I cannot use the sourceMapUrl option in the grunt config.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (1 by maintainers)

Commits related to this issue

Added temp fix for issue with LESS source maps https://github.com/gruntjs/grunt-contrib-less/issues/236 — committed to dbeckwith/lsystems by dbeckwith 9 years ago

Most upvoted comments

Same issue here. Thanks to @Wroud, this working for me:

dev: {
    options: {
        strictMath: true,
        sourceMap: true,
        outputSourceFiles: true,
        sourceMapBasepath: function () {
            this.sourceMapURL = this.sourceMapFilename.substr(this.sourceMapFilename.lastIndexOf('/') + 1);
        }
    },
    files: [{
        expand: true,
        cwd: config.assetsDir + 'less',
        src: ['*.less'],
        dest: config.cssOutput,
        ext: '-dev.css'
    }]
}

idhamperdameian on May 9, 2016

I found solution

            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2,
                    sourceMap: true,
                    sourceMapURL: "interface.css.map",
                    sourceMapRootpath: "/",
                    sourceMapBasepath: function (f) {
                        this.sourceMapURL = this.sourceMapFilename.substr(this.sourceMapFilename.lastIndexOf('/') + 1);
                        return "wwwroot/";
                    },
                },
                expand: true,
                cwd: 'wwwroot/assets/less/',
                dest: 'wwwroot/css/',
                src: ['interface.less', 'blog.less'],
                ext: '.css'
            }

as result /*# sourceMappingURL=blog.css.map */ for blog.less, and /*# sourceMappingURL=interface.css.map */ for interface.less

Wroud on Jan 24, 2016

I can confirm that downgrading to v0.12.0 got sourceMaps working correctly for my setup.

I have a hunch that it has to with configs that use grunt expanded file mapping with the cwd option.

alampros on Mar 13, 2015

Have you tried

sourceMapBasepath: 'www'

- eventually combined with

sourceMapRootpath: '/'

? Then your references should point to ‘/less/main.less’ f.e.?

MarkyMarkNo1 on Feb 9, 2015