Can't get Sass Source Maps working with grunt-autoprefixer

Question

I'm using Grunt 0.4.5 with these dependencies in my project:

"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-sass": "~0.8.1"

I've just noticed that grunt-autoprefixer didn't get added to my package.json file. Is that because it doesn't have the grunt-contrib prefix? Anyway, Source Maps work for me when I remove autoprefixer from my watch task, but as soon as I add it in again the comment at the very end of the compiled css file gets removed.

This is my autoprefixer config:

    autoprefixer: {
        options: {
            browsers: ['last 2 version', 'ie 8', 'ie 9']
        },
        single_file: {
              options: {
                // Target-specific options go here.
              },
              src: 'library/css/style.css',
              dest: 'library/css/style.css'
            },
        sourcemap: {
            options: {
                map: true
            }
        },
    },

My Sass config looks like this:

    sass: {
        dist: {
            options: {
                style: 'expanded',
                debugInfo: true,
                sourcemap: true
            },
            files: {
                'library/css/style.css': 'library/scss/style.scss'
            }
        } 
    },

and here's my watch task:

    watch: {
        options: {
            livereload: true,
            },
        scripts: {
            files: ['library/js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            },
        },
        css: {
            files: ['library/scss/*.scss'],
            tasks: ['sass', 'autoprefixer'],
            sourceComments: 'normal',
            options: {
                spawn: false,
            }
        },
        page: {
            files: ['*.php', '*.html']
        }
    }

I don't get why autoprefixer has to interfere with the source map at all to be honest, I tried using false instead of true, specifying the sourcemap manually as per the example in the grunt-autoprefixer repo, but whatever I do the comment - /*# sourceMappingURL=style.css.map */ gets stripped from the file and source maps don't work in chrome.

EDIT: Sorry, I just got it to work by using:

        sourcemap: {
            options: {
                map: true
            },
            src: 'library/css/style.css',
            dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
        },

I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts!

Answer 1

I found the following worked for me:

sass: {
  options: {
    sourceMap: true,
    sourceMapEmbed: false
  },

  dist: {
    files: {
      'css/style.css': 'css/src/style.scss',
      'css/debug.css': 'css/src/debug.scss',
    }
  }
},
autoprefixer: {
  //prefix all files
  multiple_files: {
    expand: true,
    flatten: true,
    src: 'css/*.css',
    dest: 'css/'
  },
  options: {
    map: true,
    annotation: false
  }
},

Without specifying annotation: false, I found that autoprefixer always overwrote the /*# sourceMappingURL=style.css.map */ with a data-uri sourceMappingURL that would not work (my browser inspectors would not show the original .scss source).

I also found that using sourcemap as in the accepted answer does not work if you have multiple scss/css files. I believe sourcemap allows you to set a different set of options for each scss->css mapping, but I wanted the same settings for all of mine.

Hope this helps!

Answer 2

Sorry, I just got it to work by using:

    sourcemap: {
        options: {
            map: true
        },
        src: 'library/css/style.css',
        dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
    },

I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts! I'll do some testing and see, as far as I can see it looks like source maps are generated by default now by sass, so I probably only need to specify this in autoprefixer