How to set CSS Source Map output destination when grunt-contrib-less is used

673 views Asked by At

I am using grunt-contrib-less for compiling less files.

I have grunt locally installed at root of project folder.

The css files are located at qa1/avinash/html5/phase1/css/ path from root of project folder.

So this is the path i am specifying for cwd (current working directory), src and dest parameters of the grunt-less task. there are no issues in compilation of css and source map.

The only issue i face is that the source map is generated in the same folder of gruntfile. but my generated css is at the dest path i specified. since the css and source map are at different locations i have to manually edit the less path references in source map and bring it to the generated css directory. or use sourceMapURL to specify the source map location ../../../../../style.css.map(backwards). Both ways are not convenient.

So can anyone help me how to specify the source map output destination path like we specify for destination path for generated css something like

sourceMapDest: 'qa1/avinash/html5/phase1/css/'

--

currently used Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            options: {
                sourceMap:true,
                sourceMapFilename: "style.css.map",
                sourceMapURL: '../../../../../style.css.map'
            },
            src: {
                // no need for files, the config below should work
                expand: true,
                cwd:    "qa1/avinash/html5/phase1/css/",
                src:    "style.less",
                dest:   "qa1/avinash/html5/phase1/css/",
                ext:    ".css"
            }
        },
        watch: {
            js: {
                files: ['qa1/avinash/html5/phase1/css/'],
                tasks: ['default'],
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['less']);
};
1

There are 1 answers

0
seven-phases-max On BEST ANSWER

The sourceMapFilename option may include a path part as well. I.e. just change it to:

sourceMapFilename: "qa1/avinash/html5/phase1/css/style.css.map"