How to configure sourceMaps for LESS using Grunt?

css, gruntjs, less, source-maps

Solution

I found the LESS site documentation to be more clear regarding params used by grunt-contrib-less.

LESS: Command Line Usage http://lesscss.org/usage/#command-line-usage-installing-lessc

NPM: grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-less

File structure:

laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map

File 'main.css.map' note:

- If you wish, you can rename to: main.css.source-map.json

- I guess you have some server rule setup that doesn't server *.map files properly from the 'css' folder

Compression notes:

- cleancss: true = will remove sourceMappingURL comment from main.css

- yuicompress: true = will NOT remove sourceMappingURL comment from main.css

Gruntfile.js

less: {
    dev: {
        options: {
            compress: true,
            yuicompress: true,
            optimization: 2,
            sourceMap: true,
            sourceMapFilename: 'public/css/main.css.map', // where file is generated and located
            sourceMapURL: '/css/main.css.map', // the complete url and filename put in the compiled css file
            sourceMapBasepath: 'public', // Sets sourcemap base path, defaults to current working directory.
            sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
        },
        files: {
            'public/css/main.css': 'public/less/main.less',
        }
    }
},

watch: {
    styles: {
        files: ["public/less/*"],
        tasks: ['less'],
        options: {
            livereload: true,
            nospaces: true
        }
    }
},

laravel/public/css/main.css

.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */

laravel/public/css/main.css.map

{"version":3,"sources":["/less/main.less"], etc...

Problem

I'm using grunt 0.4.2 and grunt-contrib-less 0.9.0. I want my LESS to be compiled into CSS with support for source maps. My LESS files are in `public/less`, and the main one is called `main.less`. The compiling of `public/less/main.less` into `public/css/main.css` works, but source maps don't work. What is wrong with my Grunt config below? ``` { less: { dev: { options: { compress: true, yuicompress: true, optimization: 2, sourceMap: true, sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename. sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map. sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map. }, files: { "public/css/main.css": "public/less/main.less" } } }, watch: { styles: { files: ["public/less/*"], tasks: ['less'], options: { livereload: true, nospaces: true } } } } ``` I don't want to have my CSS created in my `/public/less` folder; I want to put it into `/public/css`. Otherwise, I could use this other config, which works: ``` { less: { dev: { options: { compress: true, yuicompress: true, optimization: 2, sourceMap: true, sourceMapFilename: "public/less/main.css.map", //I DO NOT WANT THE CSS MAP HERE sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map. }, files: { "public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE } } }, watch: { styles: { files: ["public/less/*"], tasks: ['less'], options: { livereload: true, nospaces: true } } } } ```

Original source