How to configure grunt-contrib-less to generate source maps compatible with Chrome DevTools?

Question

The question title pretty much says it all. I don't know how to configure the grunt-contrib-less task that now supports source maps. My expected result is to have Chrome DevTools CSS inspector to point to the Less rules. If possible, it would be ideal that the source maps be inline in the same outputted CSS file to avoid cluttering my workspace with separate source map files.

Thanks

Answer 1

First of all, you'll need to make sure that grunt-contrib-less is running a version that supports Source Maps. The newest version is 0.9.0, so update the version used in your package.json file, like this:

"dependencies" : {
    ...[other dependencies]...
    "grunt-contrib-less" : "0.9.0"
}

Now in the command line, call npm install to install the update.

---

Next, in your Gruntfile.js, configure Source Maps for your project.

You can follow a guide here: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ or here: http://roots.io/using-less-source-maps/, but here's an example configuration:

    less : {
        development : {
            options : {
                strictImports : true,
                sourceMap: true,
                sourceMapFilename: '../css/common.css.map',
                sourceMapURL: 'http://localhost/css/common.css.map'
            },
            files : {
                '../css/common.css' : '../less/common.less'
            }
        },
    },

The key is making sure that whatever you use for sourceMapURL is an actual URL that can be opened in the browser.

Answer 2

This is my gruntfile.js, it works.

It was imporant to update to grunt-contrib-less v0.9.0 It was also important to use "XXX.css.map" not "XXX.map". And it worked after gave a proper sourcebasepath. Further below i will post excerpts from resulting .map files.

gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: false,
          yuicompress: false,
          optimization: 2,
          sourceMap: true,
          sourceMapFilename: "assets/style/bootstrap.css.map",
          sourceMapBasepath: "assets/style/"
        },
        files: {
          // target.css file: source.less file
          "assets/style/bootstrap.css": "assets/style/bootstrap.less"
        }
      }
    },
    watch: {
      styles: {
        // Which files to watch (all .less files recursively in the less directory)
        files: ['assets/style/theme/**/*.less'],
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
};

This is an excerpt from a .map file generated with lessc which of course works:

{"version":3,"file":"bootstrap.css","sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less"...

This is an excerpt from a .map file generated with grunt-contrib-less 0.9.0 which works too:

{"version":3,"sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less","theme/page-work.less"...

kind regards, Stephan