webpack - 在 css-loader 中禁用 url() 检查

Question

我有一个带有 Leaflet 1.0.3 的 React 项目。在使用使用 css-loader 的 Webpack 构建时，我得到:

./~/css-loader! 中的错误!./~/leaflet/dist/leaflet.css
找不到模块:错误:无法解析“/home/tim/work/portal/node_modules/leaflet/dist”中的“./images/layers.png”
在“/home/tim/work/portal/node_modules/leaflet/dist”中解析“./images/layers.png”
使用描述文件:/home/tim/work/portal/node_modules/leaflet/package.json(相对路径:./dist)
字段“浏览器”不包含有效的别名配置
使用描述文件后:/home/tim/work/portal/node_modules/leaflet/package.json(相对路径:./dist)
使用描述文件:/home/tim/work/portal/node_modules/leaflet/package.json(相对路径:./dist/images/layers.png)
作为目录
/home/tim/work/portal/node_modules/leaflet/dist/images/layers.png 不存在
没有延期
字段“浏览器”不包含有效的别名配置
/home/tim/work/portal/node_modules/leaflet/dist/images/layers.png 不存在
.js
字段“浏览器”不包含有效的别名配置
/home/tim/work/portal/node_modules/leaflet/dist/images/layers.png.js 不存在

这似乎是因为在leaflet.css 中使用了相对图像路径。我试图关闭 css-loader 检查:

{
测试:/\.css$/,
排除:[/node_modules/,/sanitize/],
用: [
'样式加载器',
{
加载器:'css-加载器'，
选项: {
url: false,//传单使用相对路径
最小化:假，
模块:假，
}
}
]
},

但记录的选项显然不起作用。

Answer 1

我遇到了完全相同的问题，并通过从我的项目中的 .yarnclean 文件中删除“图像”行来修复它。

如果 .yarnclean 存在于项目中，yarn 将清理 node_modules 并删除与任何模式匹配的所有文件。因此，node_modules/leaflet/dist/中的图像目录也被删除了。

另见 this closed issue在 yarn Github 存储库中。