Chrome DevTools save CSS changes directly to SASS file
compass-sass, google-chrome, google-chrome-devtools, sass
Solution
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.
Problem
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: