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.

can you try "restore defaults and reload" from devtools->settings? — karthick, Oct 29 '18 at 17:01
you will require atleast 3.4 for sourcemap to work https://github.com/gruntjs/grunt-contrib-sass#sourcemap — karthick, Oct 29 '18 at 18:26
I just reinstalled with `npm install -g sass`, as I did the first time. Now it says I have 1.14.3. Why would it not give me the most recent version? — BBaysinger, Oct 29 '18 at 18:35
I don;t think grunt-contrib-sass works with npm sass, npm sass is a different implementation of sass, grunt-contrib was written to work with gem sass, the ruby version, not dart sass. configuration syntax and everything is different between those two implementations — karthick, Oct 29 '18 at 18:48

score 2 · Answer 1 · answered Oct 29 '18 at 19:04

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

answered Oct 29 '18 at 19:04

karthick

11,998
6
56
88

either uninstall node-sass and then install gem install sass and use grunt-contrib-sass (or) uninstall grunt-contrib-sass use grunt-sass with node-sass. You are running into compatability issues – karthick Oct 29 '18 at 21:45
I've got it building without errors now, using Ruby Sass 3.6.0, and grunt-contrib-sass. Source maps are still not working, and still not seeing sourceMappingURL in the CSS. So I think I'll switch over to grunt-sass. – BBaysinger Oct 29 '18 at 22:42
Still no luck. I've updated my question again, and started a new one: https://stackoverflow.com/questions/53055629/sourcemappingurl-not-present-in-css-from-grunt-contrib-sass-nor-from-grunt-sass – BBaysinger Oct 30 '18 at 00:25

BBaysinger · Accepted Answer · 2019-02-11T00:58:28.143

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.

I too had been running into an issue where my source maps were not working correctly. After 30 minutes of trying to fix it, I discovered your comment. I had autoprefixer running in my Gruntfile too, removing it fixed the issue for me. Thanks! — rorymorris89, Feb 10 '19 at 23:10

SASS sourcemaps not working in Google Chrome

2 Answers2