如何在 Chrome Devtools 中进行 SASS 编辑？答案

【问题标题】：How can I make SASS editing work in Chrome Devtools?如何在 Chrome Devtools 中进行 SASS 编辑？
【发布时间】：2014-06-22 12:38:26
【问题描述】：

我只是关注this tutplus tutorial 获取源映射 sass。

我在 chrome 的检查元素下的 Experiment 选项卡中找不到 Support for sass 选项。它被移除了吗？我用这个功能晚了吗？

我的 sass 版本是 3.3.8 (Maptastic Maple)

如何在 Chrome Devtools 中进行 SASS 编辑？

【问题讨论】：

【解决方案1】：

我成功了。 SASS 支持不再是一个实验：它现在是一个标准。我只是按照简单的步骤使其工作。

1) 在 chrome 上打开 inspect element，然后点击右上角的齿轮图标。

2) 启用CSS source maps（我认为它默认启用。如果不检查它。启用css source map后不要关闭它。）

3) 点击左侧面板中常规选项卡下方的工作区选项卡。

4) 通过单击添加文件夹按钮添加您的源代码文件夹（关闭框。）

5) 转到 Sources 选项卡并找到您的 scss 文件。

现在您可以进行更改并点击 ctrl+s 它将自动更改您的 style.scss。

【讨论】：

这仅在您直接更改 scss 文件代码时才有效，对吧？当我在elements -> styles 选项卡中进行更改时，它只会更改.css 编译文件，并且无法将更改保存到.scss 文件。但是当我直接编辑 .scss 文件时（在 chrome 代码编辑器中），它可以保存它。你也一样吗？有没有办法将更改（在elements -> style tab 中）保存到scss 源文件？

【解决方案2】：

从 Chrome 75 开始，开启 CSS 源映射的方法如下。

【讨论】：

【解决方案3】：

这里只有我的 2 美分。 Kaspersky Chome 扩展阻止了我在 Chrome 开发者工具上的 CSS 映射。没有找到任何地方如何添加例外...

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review
怎么样？我遇到了这个问题，发现导致这个解决方案不起作用的是卡巴斯基 Chrome 扩展程序。我希望有人发表此评论，这样我就可以帮助我找出问题所在。