Setting up editing of .scss files on Chrome dev tools

Question

I've been reading https://developer.chrome.com/devtools/docs/css-preprocessors to try and setup it on my environment, but something isn't working for me.

I'm developing using JetBrains RubyMine and the project is a ruby project where all the .scss files are compiled in the ruby project to one big .css file.

I was wondering if there is a way to set up CSS mapping in the ruby project so I will be able to edit .scss files in the Chrome developer tools instead going back to the RubyMine, is there ?

Please notice that the sass gem installed on my ruby project is v3.2.19 and currently I can't upgrade it to the 3.3.0alpha at least.

Answer 1

If you can update your sass version to 3.3 you can enable Chrome's Sourcemaps. If not, you might not be able to do this.

Generall speaking sourcemaps allow Chrome to understand that example.scss maps to example.css. The terminal command is $ sass example.scss:example.css --sourcemap. Make sure you cd to your css directory first before running that command.

You'll also have to enable Source maps in Chrome by going to the dev tools settings (click on the little gear icon in the dev tools little gray bar on right) and check the boxes for "Enable CSS source maps" and "Auto-reload generated CSS".

It was a little funky for me getting started too. Sometimes the sourcemaps would be on scss and then all the sudden go to css. I believe its still an experimental feature in Chrome so it might not be 100% stable yet.

This article was helpful for me: http://thesassway.com/intermediate/using-source-maps-with-sass