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

Question

这是我正在谈论的内容的快速摘要:

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

使用设置了工作区和源图的Chrome以及链接的本地/网络文件时,我可以使用Chrome网络检查器(在"元素 - >样式"窗格下)识别选择器在正确的SCSS文件中的位置.另外,我可以点击它,转到SCSS文件,进行更改,然后将其成功保存到文件系统.但是,我之前使用的是在elements-> styles面板中进行的更改以在SCSS文件中进行更新(即如果我在元素选项卡中进行更改并检查chrome中的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 更改。