从3.6到4的css-loader无法加载字体的先前路径

问题描述

首先，我只想在深入学习之前提供一些链接。

突破性的构建。 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时，我应该寻找什么变化？

解决方法

这可能不是您的情况，但我想通了...似乎上面的例外情况是有效的，我做了2个假设并继续进行下去，请参见下文：

1 ：。版本3.x忽略并隐藏了与url（）相关的异常，即找不到给定相对路径的图像，这使得webpack继续进行4.x并不是那么宽容的构建。

2 ：。 4.x会以某种方式映射尝试使用url（）加载图像的未使用/其他文件，并且由于它们已被弃用，因此这些图像的相对路径不再正确。

做出上述假设的原因是因为我映射了所有在您的问题中引发异常的文件，并注意到带有url（）的文件试图加载一些不再存在的图像，并且在我的代码中未使用这些类还有3岁...

所以我只删除了不推荐使用的文件/类，它按预期构建了所有东西。

,

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

我刚刚为css-loader禁用了URL解析器，并克服了我的异常，一切看起来仍然可以正确加载?‍?️

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