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

【问题标题】：Setting up editing of .scss files on Chrome dev tools在 Chrome 开发工具上设置 .scss 文件的编辑
【发布时间】：2014-08-07 23:26:55
【问题描述】：

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

【问题讨论】：

【解决方案1】：

如果您可以将 sass 版本更新到 3.3，则可以启用 Chrome 的 Sourcemaps。如果没有，您可能无法执行此操作。

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

您还必须通过转到开发工具设置（单击右侧开发工具小灰色条中的小齿轮图标）在 Chrome 中启用源映射，然后选中“启用 CSS 源映射”复选框和“自动重新加载生成的 CSS”。

这对我来说也有点时髦。有时源地图会在 scss 上，然后突然转到 css。我相信它仍然是 Chrome 中的一项实验性功能，因此它可能还不是 100% 稳定。

【讨论】：