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

Question

是否可以直接在＆＃34;样式＆＃34;中完成样式更改。面板不仅保存到.css，还保存到相应的.scss文件？

我有每个文件的CSS源地图，并且工作正常 - 当我按住Ctrl键单击某个属性时，我可以直接进入.scss文件。我可以编辑.scss文件，然后重新加载（背景中的罗盘任务），但不幸的是，我在样式面板中直接更改的所有内容仅保留在已编译的.css文件中。

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

Answer 1

SASS / SCSS实时编辑已失效，因为Chromium小组已将其贬值：

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

  

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

更新：但是，鉴于以下情况，源映射仍然可以正常工作：

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

您将获得 .scss个文件，这些文件显示在Devtools的“样式”标签中。

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

注意：如果您在样式标签中更改了值，则更改将保留在您的.css文件中，而不是.scss！ / em>即使界面显示其他内容。

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

Answer 2

是的，这是可能的。

但有一些限制：

1. 不是文件，而是编辑 - Sublime Text 3，现在可能是其他一些
2. 不是SASS语法，而是SCSS。还支持LESS和纯CSS。

对于故事可以保持现实，你需要一些工具，你可以找到here。这些工具中有很多名为＆＃34; Emmet Live Style＆＃34;。

开发商很快就会支持Stylus和SASS。

Answer 3

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

以下是设置https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s

的方法