我想从元素标签中的Chrome开发工具编辑我的sass文件，这可能吗？

Question

在我的项目中，我有一个sass文件，我通过node-sass设置sourcemappath。我正在使用Node-sass来编译我的sass文件。我在我的系统上映射了我的.css文件。所以我通过源面板所做的任何更改都会将我的文件保存在磁盘上。它由node-sass编译回来。我没有看到在任何地方重新加载我自动生成的CSS，所以我认为它默认开启。

我想保存我在元素面板上所做的更改。当我从元素面板（这是scss文件，通过sourcemap工作）单击css文件时，它没有我的更改。

是否可以从元素面板保存我的更改。我做了一些更改，我没有在源面板中看到。当我刷新时，我仍然可以看到我的更改，但它没有反映在文件中。

Answer 1

目前这是一项实验性功能。它隐藏在旗帜后面，因为它可能不稳定并破坏物品。如果您现在想尝试，请执行以下操作：

1. 转到您的omnibar中的chrome://flags/#enable-devtools-experiments
2. 启用Experimental DevTools功能的标志
3. 重新启动浏览器
4. 打开DevTools并转到“设置”，然后左侧会出现一个新的Experiments标签
5. 在实验标签中，启用Live SASS选项
6. 重启DevTools

现在，您应该在“元素”面板中将更改保留在Sass中，只要它是正确的源映射。

保罗·爱尔兰在他关于Accelerating Your Workflow的I / O谈话部分中介绍了这一特征（以及其他内容）。

Answer 2

2020年1月更新-Chrome版本79-Mac 10.14.6

1. 转到Chrome开发者工具栏
2. 设置
3. 工作区
4. 点击“添加文件夹”按钮
5. 添加您的工作目录路径
6. 转到“源”标签-您将在控制台和网络标签之间找到它
7. 命令+ P（mac）搜索所需文件-示例-main.scss
8. 进行代码更改并验证

我还发现，您可以在开发工具栏和编辑器中进行更改，它们将被同步:)

Answer 3

我不相信你想要的东西是可能的。您可能希望查看LiveReload等选项以了解此行为。您可以在IDE中更改代码，编译，livereload将检测您对文件系统上已编译的.css文件的更改，并在浏览器中重新加载。