Css sourceMappingURL 在 Chrome 59.0.3071.115 中不能正常工作

Question

我有一个通过 webpack 打包的元素。 Css 是使用 sourceMap 从 sass 生成的。

    devtool: 'source-map',
...
    loader: ExtractTextPlugin.extract(
      'css-loader?sourceMap=true&minimize=true!' +
      'postcss-loader?sourceMap=true!' +
      'sass-loader?sourceMap=true'
    ),

app.css.map 文件成功生成并且 sourceMappingURL=app.css.map 放置在 app.css 中。 我看到 Chrome 在“源选项卡”中识别了 .map 文件，因为存在“webpack://”结构。

但是调试器没有使用这个 .map 来做 css:

[

之后，我将 app.css.map 文件转换为 base64(通过在线服务)并将其粘贴到 app.css

sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJz...

一切正常!

总计:

1. .map 是正确的(因为它以 base64 格式工作)
2. Chrome检测app.css.map并成功获取(因为webpack://存在于source标签中)

为什么它不适用于“app.css.map 中的 map ”，但 相同的 map 在 base64 格式下有效？如何解决？

----更新 1 ----

我已经在其他 PC 上使用相同的 chrome 进行了测试，一切正常。我认为某些 chrome 设置会导致此错误。

Answer 1

这是带有 Live SASS 选项的最新版 chrome 的一个错误。

我已经发送了有关它的错误报告。关闭 live sass 是临时解决方案。

How to enable/disable it.