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.
To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it.
In Firefox, open the developer tools, and click in Style editor tab. Then, right click in one . css file and select Show original sources to see the sass files.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With