ruby-on-rails - 在 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 的 Sourcemaps。如果没有，您可能无法执行此操作。

一般来说，sourcemaps 允许 Chrome 理解 example.scss 映射到 example.css。终端命令是 $ sass example.scss:example.css --sourcemap。在运行该命令之前，请确保先 cd 到您的 css 目录。

您还必须通过转到开发工具设置(单击开发工具右侧小灰色栏中的小齿轮图标)并选中“启用 CSS 源映射”和“自动重新加载生成的 CSS”。

我的入门也有点奇怪。有时 sourcemaps 会在 scss 上，然后突然转到 css。我相信它仍然是 Chrome 中的一个实验性功能，因此它可能还不是 100% 稳定。

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