截至2018年，

use MiniCssExtractPlugin

对于Webpack（> 4.0）将解决此问题。

https://github.com/webpack-contrib/mini-css-extract-plugin

利用extract-text-webpack-plugin在接受的答案是不推荐的WebPack 4.0+。

如果您使用的是Angular，则需要检查以确保您的

<base href="/"> 

标记位于样式表包之前。我从这里切换了代码：

 <script src="~/bundles/style.bundle.js"></script>
 <base href="~/" />

对此：

 <base href="~/" />
 <script src="~/bundles/style.bundle.js"></script>

并且问题得以解决。感谢这篇文章让我睁开了眼睛。

我遇到了相同的问题，但是原因不同。

在威尔·麦登的解决方案无济于事之后，我尝试了所有可以通过Intertubes找到的替代解决方案-也无济于事。进一步研究，我只是打开了一个有争议的字体文件。Webpack已以某种方式覆盖了文件的原始内容，以包含某种配置信息，这可能是由于先前对文件加载器的修改。我用原始文件替换了损坏的文件，瞧瞧，错误消失了（对于Chrome和Firefox）。

与上面的@ user3006381一样，我的问题不仅是相对URL，而是webpack像放置JavaScript文件一样放置文件。它们的内容基本上都是：

module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";

在字体目录中而不是在实际字体中，并且字体文件在哈希代码下的输出文件夹中。要解决此问题，我必须在url加载程序（在我的情况下为图像处理器）上更改测试，以不加载字体文件夹。我仍然必须将webpack.config.js中的output.publicPath设置为@ will-madden的出色回答。

我知道这不能回答OP的确切问题，但我来到这里的症状相同，但原因不同：

我包含了Slick Slider的.scss文件，如下所示：

@import "../../../node_modules/slick-carousel/slick/slick.scss";

仔细检查后发现，它试图从无效位置（<host>/assets/css/fonts/slick.woff）加载字体，这是从样式表中引用字体的方式。

我最终只是将拷贝/font/到了我assets/css/，问题就为我解决了。

就像@mcortesi 在这里要求的那样，如果您从css加载程序查询中删除sourceMaps，则将在不使用blob的情况下构建css，并且将对数据URL进行很好的解析。