webpack - 从 3.6 到 4 的 css-loader 打破了加载字体之前的路径

Question

首先，在深入探讨之前，我只想提供一些指向事物的链接。

破坏构建。 https://github.com/MorphicPro/morphic.pro/runs/969426390?check_suite_focus=true在此版本中唯一发生变化的是将 css-loader 从 3.6.0 升级到 4.2.1在这里提交:https://github.com/MorphicPro/morphic.pro/commit/eecf41d671f1b9357f872bfac0e378f6b81260ac

来自阅读https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0看起来 css-loader 在本地解析路径的方式发生了变化。IE:改进 url() 解析算法 (bc19ddd) https://github.com/webpack-contrib/css-loader/commit/bc19ddd8779dafbc2a420870a3cb841041ce9c7c

在 3.6 中的 4 之前，我通过 url() 成功解析了我的路径 https://github.com/MorphicPro/morphic.pro/blob/master/assets/css/app.css#L12

我还使用文件加载器通过 https://github.com/MorphicPro/morphic.pro/blob/master/assets/webpack.dev.config.js#L76-L83 将字体移动到正确的路径

将 css-load 升级到 4 后，这看起来现在被错误破坏了:

ERROR in ./css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/fonts/icomoon.woff' in '/Users/joshchernoff/Dev/morphic.pro/assets/css'

从错误来看，它似乎在尝试解析 css 文件夹中的字体路径。我尝试将 src: url("/fonts/icomoon.woff"); 的字体路径更新为 src: url("../fonts/icomoon.woff"); 但没有运气。从 3 升级到 4 时我应该注意哪些变化？

Answer 1

我找到了适合我的解决方案。

我刚刚禁用了 css-loader 的 URL 解析器并克服了我的异常，一切看起来仍在正确加载🤷‍♂️

https://webpack.js.org/loaders/css-loader/#url