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

Question

我只是按照 这个 tutplus 教程 获取源映射 sass。

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

我的 sass 版本是 3.3.8 (Maptastic Maple)

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

Answer 1

我成功了。 SASS 支持不再是一项实验：它现在已成为一项标准。 我只需按照简单的步骤即可使其发挥作用。

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

2）启用 CSS 源映射（我认为默认情况下已启用。如果不是，请检查它。启用 css 源映射后不要关闭它。）

3) 单击左侧面板上“常规”选项卡正下方的“工作空间”选项卡。 4) 单击

添加文件夹

按钮添加源代码文件夹（关闭该框。） 5) 进入

Sources

选项卡并找到您的 scss 文件。 现在您可以进行更改并按 ctrl+s，它会自动更改您的 style.scss。

Answer 2

打开浏览器的开发者工具 (

Ctrl
1. +Shift+I)。 打开右上角的下拉菜单，然后单击“设置”。
2. 找到“启用 CSS 源映射”复选框并将其打开。
3. 

Answer 3