首页 文章

Chrome中的Sass源图无效 . 狼狈

提问于
浏览 次
2

我已经按照我可以找到的所有方向来获取Sass源图在Chrome中工作 - 而且我仍然以某种方式失败 . 我不知道怎么说 - 也许你可以？

使用Sass 3.3.0.alpha.198（"bleeding edge"，我'm told), I' m成功生成了一个源代码文件（ test.css.map ），该文件与我编译的CSS一起;并且在编译的CSS的底部是行： /*# sourceMappingURL=test.css.map */ . 所以这一步似乎过得好

在Chrome Canary中，我已经去了 chrome://flags 并启用了开发人员工具实验 . 我重新开始了 . 在我的检查器设置中，在常规选项卡中，我已检查"Enable source maps";在“实验”标签中，我检查了"Sass stylesheet debugging" .

完成上述所有操作后，当我检查一个元素（在访问已编译的CSS的本地HTML文件上）时，我仍然使用相同的旧CSS行号，链接到相同的旧编译CSS文件 . 没有源图表支持的指示 . 这不是教程所说的应该发生的事情 .

（我也在稳定的Chrome中试过这个 - 它应该可以稳定运行吗？ - 通过启用开发人员工具实验并选中“启用源 Map ”和“支持Sass”框 . 也没有运气 . ）

有人可以告诉我我错过了什么吗？

google-chrome sass google-chrome-devtools source-maps

2 回答

  • 3

    您是从file：// URL加载页面吗？这不会出于安全原因 - 在localhost上使用任何http服务器 .

    此外，更新您的金丝雀是一个好主意; CSS源 Map 已从实验中毕业 . 您应该在常规设置中选中“启用CSS源 Map ” .

    回复于
  • 0

    如果其他人在此处结束，要在Chrome中使用源代码 Map 以获取Sass，您需要先使用 --sourcemap 标志生成它们！

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

    更多信息：https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

    回复于

相关问题