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

Question

我只关注this tutplus tutorial来源地图sass。

我在chrome中的inspect元素下的实验标签中找不到支持sass 选项。它被删除了吗？我迟到了使用这个功能吗？

我的sass版本是3.3.8（Maptastic Maple）

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

Answer 1

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

1）在chrome上打开检查元素，然后点击右上方显示的齿轮图标。

2）启用 CSS源地图（我认为默认启用它。如果不是，请检查它。启用css源地图后不要关闭它。）

3）点击常规标签下方左侧面板上的工作区标签。

4）点击添加文件夹按钮添加源代码文件夹（关闭框）。

5）转到来源标签，找到您的scss文件。

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

Answer 2

从Chrome 75开始，这是打开CSS源地图的方法。

1. 打开浏览器的开发人员工具（Ctrl + Shift + I）。
2. 打开右上角的下拉菜单，然后单击“设置”。
3. 查找“启用CSS源映射”复选框，然后将其打开。