Chrome DevTools：SASS源文件没有保存在磁盘上

Question

我按照Gogle提供的说明设置了源图： https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

源图正在运行，我可以在＆＃34; Elements选项卡＆＃34;中看到.scss源链接。

但我有两个问题：

1 - 当我在＆＃34; Elements选项卡＆＃34;中编辑CSS属性时.scss的链接分解，DevTools显示链接到已编译的.css文件。

2 - 当我按住c键点击＆＃34; Elements＆＃34;中的CSS属性时选项卡，＆＃34;来源＆＃34;选项卡成功打开以显示相应的.scss文件。当我更改DevTools中的文件并尝试保存它时 - DevTools说该文件已保存，但它实际上并没有保存在磁盘上（似乎它被保存在其他地方）。因此，sass watch不会更新.css，因为.scss文件实际上并没有保存在磁盘上。

我正在使用：

-Chrome 33.0.1750.154 m

-Sass 3.3.4

-SimpleHTTPServer

Answer 1

在文章中找到答案：https://medium.com/what-i-learned-building/b4daab987fb0

为了能够在Chrome DevTools中编辑源文件，需要：

1. 将项目文件夹添加为工作区（DevTools - 设置 - 工作区 - 添加文件夹）
2. 将webserver提供的源文件映射到本地文件：

按住Ctrl键并单击任何css属性以打开所提供的源。在“源”树中，右键单击该文件，然后选择“映射到网络资源”。



Chrome似乎会自动映射文件夹中的所有其他资源。现在，您可以从DevTools实时编辑源文件。

如果您希望Chrome在更改源文件时自动更新网站，请不要忘记在常规标签中启用“自动重新加载生成的CSS”。