google-chrome - Chrome DevTools 将 CSS 更改直接保存到 SASS 文件

Question

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

我有每个文件的 CSS 源映射，并且工作正常 - 当我 Ctrl-单击一个属性时，我可以直接跳转到 .scss 文件。然后我可以编辑 .scss 文件，它会正确重新加载(后台的 compass 任务)，但不幸的是，我直接在“样式”面板中更改的所有内容都仅保留到已编译的 .css 文件中。



一旦我更改了一个值，文件就会更改为 main.css 并且更改只保留在那里:

Answer 1

SASS/SCSS 实时编辑不再有效，因为它被 Chromium 团队贬低了:

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.

更新:但是，sourcemaps 仍然可以正常工作，并且考虑到:

您的 CSS 源映射到 SASS 文件

您已将带有 css/sass 的文件夹添加到工作区(即 Devtools 可以在您的文件系统中访问它们)

您正在从 localhost

为您的网站(或至少 .css 文件)提供服务

你 将获得 .scss在 Devtools 的样式选项卡中公开的文件。

编辑:双击 .scss文件名，它将在 Sources 选项卡中用于编辑和保存。不像在样式选项卡中直接编辑那样精简，但仍然非常有用。我几乎所有与 css 相关的编辑都是以这种方式进行的。

注意 : 如果你改变 中的值款式 选项卡，更改将保留在您的 .css 中文件而不是 .scss !即使界面显示不同。



额外提示 :如果您添加符号链接(symbolic link)/将您的 css 框架安装到 node_modules因此 Devtools 可以访问它，您也可以访问所有框架的 sass 文件。请注意不要暴露整个 node_modules到您的“实时刷新”Webpack 服务器，因为它会阻塞 node_modules 中的 100,000 个文件观察。