Trying to generate css source-maps

[xeroxoid]

Hi, we are trying to generate CSS sourcemaps because our less codebase has grown quite large. I have tried the following in our grunt configuration:

less: {
  options: {
    paths: [
      '<%= yeoman.client %>/bower_components',
      '<%= yeoman.client %>/app',
      '<%= yeoman.client %>/components'
    ],
    sourceMap: true,
    sourceMapFilename: '.tmp/app/app.css.map', // where file is generated and located
    sourceMapURL: '/app/app.css.map', // the complete url and filename put in the compiled css file
    sourceMapBasepath: 'app', // Sets sourcemap base path, defaults to current working directory.
    sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
  },
  server: {
    files: {
      '.tmp/app/app.css' : '<%= yeoman.client %>/app/app.less'
    }
  },
},

but with no success. The .map file is being generated (inside the .tmp folder) that way, but the css does not seem to have a reference and in Chrome no map file seems unavailable. I even tried to rename the file to .json in case the server does not serve .map files.

Then I also tried:

less: {
  options: {
    paths: [
      '<%= yeoman.client %>/bower_components',
      '<%= yeoman.client %>/app',
      '<%= yeoman.client %>/components'
    ],
    sourceMap: true,
    outputSourceFiles: true,
    sourceMapFileInline: true
  },
  server: {
    files: {
      '.tmp/app/app.css' : '<%= yeoman.client %>/app/app.less'
    }
  },
},

to generate it inline but nothing happens. CSS only contains the code and no map... Last but not least, I tried moving those options to the server (under less) but again it did not make any difference..

Any ideas?

Item	Version
generator-angular-fullstack	2.0.13
Node	v4.2.6
npm	3.6.0
Operating System	OS X 10 & Ubuntu 15.10

[xeroxoid]

Sorry, my bad. After losing a couple of hours on the issue I found that autoprefixer was overwriting the sourceMappingUrl in the generated CSS file. Quick fix for that:

// Add vendor prefixed styles
autoprefixer: {
  options: {
    browsers: ['last 2 versions'],
    map: true  <--- this here
  },
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/',
      src: '{,*/}*.css',
      dest: '.tmp/'
    }]
  }
},

...

// Compiles Less to CSS
less: {
  options: {
    paths: [
      '<%= yeoman.client %>/bower_components',
      '<%= yeoman.client %>/app',
      '<%= yeoman.client %>/components'
    ],
    sourceMap: true,    <--- this here
    sourceMapFileInline: true  <--- and this here
  },
  server: {
    files: {
      '.tmp/app/app.css' : '<%= yeoman.client %>/app/app.less'
    }
  },
},

And pow, it works!