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

时间：2014-05-26 08:16:23

标签： ruby-on-rails ruby google-chrome sass google-chrome-devtools

我一直在阅读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。

答案 0 :(得分：1)

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

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

您还必须通过转到开发工具设置启用Chrome中的源地图（点击右侧开发工具小灰条中的小齿轮图标），然后选中＆＃34;启用框CSS源地图＆＃34;和＆＃34;自动重新加载生成的CSS＆＃34;。

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