我按照 Google 提供的说明设置源映射：https://developers.google.com/chrome-developer-tools/docs/css-preprocessors https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
源映射正在工作，我可以在“元素选项卡”中看到 .scss 源链接。
但我有两个问题：
1 - 当我在“元素选项卡”中编辑 CSS 属性时，.scss 的链接中断，并且 DevTools 显示已编译的 .css 文件的链接。
2 - 当我按住 Ctrl 键单击“元素”选项卡中的 CSS 属性时，“源”选项卡将成功打开并显示相应的 .scss 文件。当我在 DevTools 中更改文件并尝试保存它时 - DevTools 说文件已保存，但实际上并未保存在磁盘上（似乎是保存在其他地方）。因此 sass watch 不会更新 .css，因为 .scss 文件实际上并未保存在磁盘上。
我在用：
-镀铬 33.0.1750.154 m
-Sass 3.3.4
-简单HTTP服务器
在文章中找到了答案：https://medium.com/what-i-learned-building/b4daab987fb0 https://medium.com/what-i-learned-building/b4daab987fb0
为了能够在 Chrome DevTools 中编辑源文件，需要：
- 添加项目文件夹作为工作区（DevTools - 设置 - 工作区 - 添加文件夹）
- 将webserver提供的源文件映射到本地文件：
按住 Ctrl 键并单击任何 css 属性以打开提供的源。在源树中右键单击该文件并选择“映射到网络资源”。
Chrome 似乎会自动映射该文件夹中的所有其他资源。现在您可以从 DevTools 实时编辑源文件。
如果您希望 Chrome 在更改源文件时自动更新网站，请不要忘记在“常规”选项卡中启用“自动重新加载生成的 CSS”。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
