cssgoogle-chromesasssource-mapsgrunt-contrib-sass

SASS sourcemaps not working in Google Chrome

I have CSS source maps enabled, but Google Chrome is behaving like they are disabled. In all the resources I've looked at, all I should need to do is enable source maps in DevTools preferences. It is clearly enabled there:

enter image description here

The source maps reside alongside my CCS files, like so:

enter image description here

In DevTools > Elements > Styles, there are only CSS files, no SCSS or SASS:

enter image description here

Here is my grunt-contrib-sass config in Gruntfile.js:

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.css', '**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css',
                sourcemap: 'auto',
            }],
            options: {
            }
        }
    },

This site is served via grunt serve on OSX, and source maps are generated by grunt-contrib-sass.

What's really weird, is I'm 99% sure I saw it working correctly once, right after I first set it up. I didn't change anything after that...

What's the next step in trying to debug this? Should I be able to see if Chrome is making a (failed?) request to the .map files? Am I missing something?

UPDATE: I think I've determined that the maps are not being loaded because the sourceMappingURL is not present in the compiled CSS. I have opened up a new issue for that.

Solution

  • It turns out that auto-prefixer was running on the compiled CSS and stripping out the sourceMapURL comment, which now makes sense that it would do that, because unless you have auto-prefixer source maps turned on (which I did not), it would make the source maps untrue. A cool thing I learned form this, is that auto-prefixer is apparently able to use Sass source maps to make it's own, and keep everything true to the Sass files.

    I actually wish there was a warning whenever auto-prefixer finds source maps, but doesn't have source maps enabled itself, because it's obvious that tasks shouldn't generate sourcemaps that wont be used.

    I would have been more likely get an answer sooner if I would have posted my whole Gruntfile, but it's a lot of stuff, and I was trying scale back to code I thought was relevant. Darn.