我按照Gogle提供的说明设置了源图:https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
源图正在工作,我可以在“Elements选项卡”中看到.scss源链接 .
但我有两个问题:
1 - 当我在“Elements选项卡”中编辑CSS属性时,指向.scss的链接会中断,DevTools会显示指向已编译的.css文件的链接 .
2 - 当我按住“元素”选项卡中的CSS属性时,“源”选项卡将成功打开以显示相应的.scss文件 . 当我更改DevTools中的文件并尝试保存它时 - DevTools说该文件已保存,但它实际上并没有保存在磁盘上(似乎它被保存在其他地方) . 所以sass watch不会更新.css,因为.scss文件实际上并没有保存在磁盘上 .
我在用:
-Chrome 33.0.1750.154 m
- 通过3.3.4
-SimpleHTTPServer
1 回答
在文章中找到答案:https://medium.com/what-i-learned-building/b4daab987fb0
为了能够在Chrome DevTools中编辑源文件,需要:
将项目文件夹添加为工作区(DevTools - 设置 - 工作区 - 添加文件夹)
将webserver提供的源文件映射到本地文件:
Ctrl单击任何css属性以打开服务源 . 在“源”树中,右键单击该文件,然后选择“映射到网络资源” .
Chrome似乎会自动映射文件夹中的所有其他资源 . 现在,您可以从DevTools实时编辑源文件 .
如果您希望Chrome在更改源文件时自动更新网站,请不要忘记在“常规”选项卡中启用“自动重新加载生成的CSS” .