SASS sourcemaps not working in Google Chrome

Question

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:

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

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

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.

Answer 1

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.

Answer 2

After seeing your responses in comments. I am adding this as an answer

The reason why your sourcemap doesn't load is due to the fact that you are using grunt-contrib-sass with dart sass.

Dart-sass is a recent rewrite of ruby sass. Grunt-contrib-sass is developed to work with the Ruby sass.

So I recommend you to uninstall sass. And do a gem install of ruby sass. Or change the syntax of sass configs to the new configs https://www.npmjs.com/package/sass. But I am not sure that will work with the current set up. So the former solution is recommended.

Source map requirements for grunt contrib can be found here https://github.com/gruntjs/grunt-contrib-sass#sourcemap