Chrome / Sass源图，在检查器中进行的更改未保存在SCSS文件中

Question

以下是我正在谈论的内容的快速摘要：

https://medium.com/what-i-learned-building/b4daab987fb0

当使用Chrome设置了工作区和源图并且链接了本地/网络文件时，我可以使用Chrome网络检查器（在“元素” - >“样式”窗格下）来识别选择器在正确的SCSS文件中的位置。另外，我可以点击它，转到SCSS文件，进行更改，然后将其成功保存到文件系统。但是，我之前使用的是 elements-＆gt; styles 面板中的更改，以便在SCSS文件中进行更新（即，如果我在元素选项卡中进行更改并检查内部的SCSS文件它应该改变它。）

相反，它会对CSS文件进行更改。显然这不是很有用，因为：

• 一旦更改SCSS文件，它将被覆盖
• 这意味着即使重新加载，Chrome也会显示SCSS文件中没有的样式，因为它们 一直保存在CSS文件中

我在OSX和Windows上使用Sass 3.3.6尝试过这个。 也可以确认它不是＃9中提到的“../”问题 https://code.google.com/p/chromium/issues/detail?id=273384因为sass文件现在位于css文件中。样式表标签上也没有style.css？ver = x扩展名。

Answer 1

https://code.google.com/p/chromium/issues/detail?id=257778就是你要求的。如果涉及变量或复杂语言功能，在编辑样式窗格时修改SCSS代替CSS是不可能的（模糊的），所以最好的选择是 Ctrl - 单击所需的CSS属性在样式窗格中导航到相应的SCSS片段并编辑普通SCSS资源文本，然后保存（ Ctrl + S ）并让sass编译器（在监视模式下运行）完成剩下的工作。您应该为DevTools启用Enable CSS source maps和Auto-reload generated CSS设置以获取生成的CSS更改。