Chrome 中的 Sass 源映射不起作用。困惑答案

【问题标题】：Sass sourcemaps in Chrome not working. FlummoxedChrome 中的 Sass 源映射不起作用。困惑
【发布时间】：2013-07-14 01:37:58
【问题描述】：

我已经按照我能找到的所有指示让 Sass 源映射在 Chrome 中工作——但我仍然以某种方式失败。我不知道怎么做——也许你可以？

使用 Sass 3.3.0.alpha.198（有人告诉我，“前沿”），我成功地生成了一个源映射文件 (test.css.map)，该文件与我编译的 CSS 并排放置；在编译后的 CSS 的底部是一行：/*# sourceMappingURL=test.css.map */。所以这一步似乎进展顺利。

在 Chrome Canary 中，我访问了 chrome://flags 并启用了开发者工具实验。我已经重新开始了。在我的检查器设置中，在“常规”选项卡中，我选中了“启用源地图”；在“实验”选项卡中，我检查了“Sass 样式表调试”。

毕竟，当我检查一个元素（在访问已编译 CSS 的本地 HTML 文件上）时，我仍然得到相同的旧 CSS 行号，链接到相同的旧已编译 CSS 文件。没有说明 sourcemap 支持。这不是教程所说的应该发生的事情。

（我也在稳定版 Chrome 中尝试过这个——它应该在稳定版中工作吗？——通过启用开发者工具实验并选中“启用源映射”和“支持 Sass”框。也没有运气.)

谁能告诉我我错过了什么？

【问题讨论】：

标签： google-chrome sass google-chrome-devtools source-maps

【解决方案1】：

您是从 file:// URL 加载页面吗？出于安全原因，这不起作用 - 使用本地主机上的任何 http 服务器。

另外，更新您的 Canary 是个好主意； CSS source maps 已经从实验中毕业了。您应该在常规设置中选中“启用 CSS 源映射”。

【讨论】：

谢谢——我缺少的知识是我不能使用本地静态文件中的源映射，它们必须通过 HTTP 提供。现在可以使用了。

【解决方案2】：

万一其他人在这里结束，要在 Chrome for Sass 中使用源映射，您需要先使用 --sourcemap 标志来生成它们！

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

【讨论】：

对此答案的更新：--sourcemap 标志无参数已被正式弃用。您必须提供一种 SASS 将生成的源映射，auto、file、inline 或 none 之一。从命令行帮助：--sourcemap=TYPE 如何将生成的输出链接到源文件。 auto （默认）：可能的相对路径，其他地方的文件 URI 文件：总是绝对文件 URI 内联：在源映射中包含源文本无：没有源映射