在Chrome开发工具上设置.scss文件的编辑

Question

我一直在阅读https://developer.chrome.com/devtools/docs/css-preprocessors尝试在我的环境中设置它，但有些东西对我不起作用。

我正在使用JetBrains RubyMine进行开发，该项目是一个ruby项目，其中所有.scss文件都在ruby项目中编译为一个大的.css文件。

我想知道是否有办法在ruby项目中设置CSS映射，这样我就可以在Chrome开发工具中编辑.scss文件，而不是回到RubyMine，是吗？

请注意我的ruby项目上安装的sass gem是v3.2.19，目前我至少无法将其升级到3.3.0alpha。

Answer 1

如果您可以将sass版本更新为3.3，则可以启用Chrome的源图。 如果没有，您可能无法做到这一点。

使用通用语言的源图可让Chrome了解example.scss映射到example.css。 终端命令是$ sass example.scss:example.css --sourcemap 。 在运行该命令之前，请确保先cd到css目录。

您还必须通过转到开发工具设置（点击右侧开发工具小灰色栏中的小齿轮图标）启用Chrome中的源地图，并选中“启用CSS源地图”和“自动 - 重新加载生成的CSS“。

这对我开始来说有点时髦。 有时源图将在scss上，然后突然转到css。 我相信它仍然是Chrome中的一个实验性功能，所以它可能还不是100％稳定。

这篇文章对我有帮助： http ： //thesassway.com/intermediate/using-source-maps-with-sass