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

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