sourceMapRootpath to have sourcemaps using LESS

Question

I'm trying to have sourcemaps on my project. I'm using LESS, compiled with Grunt using grunt-contrib-less

Here is the code I have on my gruntfile.js:

less: {
  development: {
    options: {
      paths: ["assets-src"],
      // LESS source maps
      // To enable, set sourceMap to true and update sourceMapRootpath
         based on your install
      sourceMap: true,
      sourceMapFilename: 'assets-src/desktop/css/desktop.css.map',
      sourceMapRootpath: 'assets-dist/desktop/css/'
    },
    files : {
      "assets-src/desktop/css/desktop.css" :
      [
      "assets-src/desktop/less/reset.less",
      "assets-src/desktop/less/variables.less",
      "assets-src/desktop/less/mixins.less" 
      ]
    }
  }
 }

And this is the file's structure I have:

I have problems defining the sourceMapRootpath. I tried putting the same folder where all .LESS files are, but nothing happends, the same using the folder where .CSS files are.

Any idea on this?

Thanks! seba

Answer 1

I just solved this issue by setting to true the parameter "outputSourceFiles". You have to add this param. Because the sourceMapping of LESS is related to your express server root. I'm almost sure yours is assets-dist. By the way, you should have this in your gruntfile :

enter code here
      outputSourceFiles: true, // with this param you'll have your less in your map and you can see it
      sourceMap: true,
      sourceMapFilename: 'path/to/your/map', 
      sourceMapURL: '/complete/url/to/your/map', 
      sourceMapBasepath: 'public'