Chrome DevTools将CSS更改直接保存到SASS文件 [英] Chrome DevTools save CSS changes directly to SASS file

问题描述

是否可以直接在样式面板中进行样式更改，而不仅保留到.css，还保留到相应的.scss文件？

每个文件都有CSS源代码映射，并且效果很好-按住Ctrl键并单击属性时，我可以直接跳入.scss文件。然后，我可以编辑.scss文件，并且可以正确地重新加载它（在后台包含罗盘任务），但是不幸的是，我直接在样式面板中直接更改的所有内容仅保留到已编译的.css文件中。

当我更改值时，文件更改为main.css，并且更改仅保留在该位置：

解决方案

SASS / SCSS实时编辑不再起作用由Chromium小组贬值：

额外提示：如果添加符号链接/将CSS框架安装到 node_modules 中，以便Devtools可以访问它，那么您还将可以访问所有框架的sass文件。请注意不要将整个 node_modules 暴露给您的实时刷新 Webpack服务器，因为它会阻塞 node_modules 进行观察。

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:

解决方案

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.

这篇关于Chrome DevTools将CSS更改直接保存到SASS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！