Chrome DevTools save CSS changes directly to SASS file

Question

Is it possible to have style changes done directly in the "Styles" panel not only persisted to the .css but also to the corresponding .scss file?

I have CSS source maps for every file and that works fine - I can jump right into the .scss file when I Ctrl-Click a property. I can edit the .scss file then and it reloads correctly (compass task in the background), but unfortunately everything I change directly in the Styles panel is persisted only to the compiled .css file.

As soon as I change a value, the file changes to main.css and the changes are only persisted there:

Answer 1

SASS/SCSS live editing no longer works as it was depreciated by Chromium team:

https://bugs.chromium.org/p/chromium/issues/detail?id=863408#c5

We used to have the "LiveSASS" experiment a while ago that would propagate changes back to SASS/sourcemapped CSS. The experiment was eventually deprecated and removed due to no clear path forward.

UPDATE: however, sourcemaps still work fine and given that:

• your CSSs are sourcemapped to SASS files
• you have added the folder with css/sass to workspace (i.e. Devtools can access them in your filesystem)
• you're serving your website (or at least .css files) from localhost

you will get .scss files exposed in Devtools' Styles tab.

To edit: just double-click .scss file name and it will be available in Sources tab for editing and saving. Not as streamlined as direct editing in Styles tab, but still quite useful. I do almost all my css-related edits this way.

NOTE: if you change values in Styles tab, changes will persist in your .css files and not .scss! Even though interface shows otherwise.

Extra hint: if you add a symlink / install your css framework into node_modules so it's accessible to Devtools, you will get access to all framework's sass-files also. Just be careful not to expose whole node_modules to your "live refreshing" Webpack server, as it will choke on 100,000 of files inside node_modules to observe.