11

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

Alejandro García Iglesias
  • 16,222
  • 11
  • 51
  • 64

2 Answers2

12

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

user2496130
  • 159
  • 6
  • 1
    This is a great answer and works, I wish they'd add support for `--source-map-map-inline`, that way it'd be so much simpler as it includes the map inline with the CSS removing the need for basepath and a separate map file - perfect for development. – bloke_zero Apr 24 '14 at 11:29
2

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.

kimbo6365
  • 41
  • 3