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

Posted 2023-03-05

【中文标题】Chrome DevTools 将 CSS 更改直接保存到 SASS 文件

【英文标题】：Chrome DevTools save CSS changes directly to SASS file

【发布时间】：2014-04-24 10:57:51

【问题描述】：

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

我对每个文件都有 CSS 源映射，而且效果很好 - 当我按住 Ctrl 并单击一个属性时，我可以直接跳转到 .scss 文件。然后我可以编辑 .scss 文件，它会正确重新加载（在后台执行指南针任务），但不幸的是，我在样式面板中直接更改的所有内容都仅保留到已编译的 .css 文件中。

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

【问题讨论】：

两年多了1151次浏览，还没有回答？ 有人帮助我们！

仍未解决 - 实时编辑中的更改仍仅保存到 css 文件中

2018 年 10 月，仍在等待 Chrome Devtools 提供此功能

您找到解决方案了吗？他们将其作为 chrome flags 实验，将其删除，现在说这一切都按预期工作，这真是太荒谬了。如果有的话，它鼓励我使用带有 @import 而不是 scss 的普通 css，因为这对于实时创建设计更有效。

【参考方案1】：

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

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

不久前，我们曾经进行过“LiveSASS”实验，它将更改传播回 SASS/sourcemapped CSS。由于没有明确的前进方向，该实验最终被弃用并删除。

更新：但是，源地图仍然可以正常工作，并且考虑到：

您的 CSS 已源映射到 SASS 文件 您已将带有 css/sass 的文件夹添加到工作区（即 Devtools 可以在您的文件系统中访问它们） 您正在从 localhost 为您的网站（或至少 .css 文件）提供服务

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

要编辑：只需双击.scss 文件名，即可在“源”选项卡中进行编辑和保存。不像在样式选项卡中直接编辑那样精简，但仍然非常有用。我几乎所有与 css 相关的编辑都是这样进行的。

注意：如果您更改 样式 选项卡中的值，更改将保留在您的 .css 文件中，而不是 .scss！尽管界面显示不同。

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

【讨论】：

虽然它已经被弃用了，但我仍然认为它非常有用，因为开发者可以节省再次编译修改后的源代码的时间。

【参考方案2】：

是的，这是可能的。

但有一些限制：

不是归档，而是编辑器 - Sublime Text 3，现在可能是其他的 不是精确的 SASS 语法，而是 SCSS。还支持 LESS 和纯 CSS。

为了让故事成为现实，你需要一些工具，你可以找到here。一堆名为“Emmet Live Style”的工具。

开发者承诺很快就会支持 Stylus 和 SASS。

【参考方案3】：

如果您设置了工作区，那么您将能够将 Sass 保存到您计算机上的文件中。

这里是如何设置它https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s

【讨论】：

我已经设置了一个工作区。我也可以保存对 SASS 文件的更改，但前提是我在 DevTools 编辑器中打开它。不幸的是，“实时”样式更改仅保存到 .css 文件中，这就是问题所在。

在 OSX 上同样的问题。我已经决定使用 tincr (tin.cr/docs.html) 扩展名并在 Aptana 中进行编辑。我的浏览器浮动在所有其他窗口之上，这样当我在 Aptana 中保存时，Compass（它正在监视我的 css/scss 文件夹）会更新源映射文件和 css 文件，然后 tincr 会自动更新 chrome 的更改，以便我不必刷新。似乎所有这些技术的结合目前都处于最前沿，而且它们还没有完美地结合在一起。目前，我对当前的工作流程感到满意；但它可以改善。