问题
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:
回答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
.cssfiles) 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.
回答2:
Yes, it's possible.
But with some limitations:
- Not to file, but to editor - Sublime Text 3, and now may be some other
- Not exact SASS syntax, but SCSS. Also LESS and plain CSS are supported.
For the tale can stay a the reality you need a some tools that you can find here. The bunch of these tools named "Emmet Live Style".
The developer promise support for Stylus and SASS soon.
回答3:
If you set up a Workspace then you will be able to save Sass to your files on your computer.
Here's how to set it up https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s
来源：https://stackoverflow.com/questions/22484836/chrome-devtools-save-css-changes-directly-to-sass-file