Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SASS sourcemaps not working in Google Chrome

Tags:

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.

like image 653
BBaysinger Avatar asked Oct 29 '18 16:10

BBaysinger


People also ask

How do I enable Sourcemaps in Chrome?

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.

How do I enable Sourcemaps Sass?

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.


1 Answers

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

like image 120
karthick Avatar answered Oct 04 '22 23:10

karthick