Autoprefixer Breaks CSS Source Maps

[bobrocke]

Here's my gruntfile.js:

module.exports = function(grunt) {

// Load Grunt tasks declared in the package.json file
require('load-grunt-tasks')(grunt);

grunt.initConfig({
    sass: {
    options: {
        sourceMap: true
    },
        dist: {
            files: {
                'user/themes/br/css-compiled/bobmess.css': 'user/themes/br/scss/bobmess.scss'
            }
        }
    },

    autoprefixer: {
        dist: {
            src: 'user/themes/br/css-compiled/bobmess.css'
        }
    },

    watch: {
        scss: {
            files: ['user/themes/br/scss/*.scss'],
            tasks: ['sass', 'autoprefixer'],
        },

        livereload: {
            files: ['user/**/*.{css,md,twig,js,yaml}'],
            options: {
                livereload: true
            }
        }
    }
});

grunt.registerTask('default', ['watch']);

}; Running it creates a css file and a source map with LibSass via grunt-sass. But Chrome does not recognize the source map. If I comment out the autoprefixer task, the source map is recognized by Chrome. I've tried it with grunt-contrib-sass (which uses Ruby Sass) and I find the same behavior.

It seems as if autoprefixer is messing up the source map, or the reference to it, somehow.

[ai]

/cc @nDmitry

[nDmitry]

Sourcemaps are disabled by default, you should specify map: true in autoprefixer task options. https://github.com/nDmitry/grunt-autoprefixer#optionsmap

[bobrocke]

Duh! Thanks! It works fine if I configure it properly. :(