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

Posted 2023-03-07

【中文标题】在 css-loader 中禁用 url() 检查

【英文标题】：Disabling url() check in css-loader

【发布时间】：2017-09-07 20:43:39

【问题描述】：

我有一个包含 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-loader'， 选项： url: false, // 传单使用相对路径 最小化：假， 模块：假， ] ,

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

【参考方案1】：

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

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

另请参阅 yarn Github 存储库中的 this closed issue。

【参考方案2】：

更详细地查看node_modules，yarn add leaflet@1.0.3 没有将图像目录或图像放入node_modules/leaflet/dist/。从 repo 的克隆中复制图像可以解决问题。

【参考方案3】：

至少在windows下我也可以验证

纱线添加传单

未在 node_modules -missing images 文件夹中正确安装传单依赖项。但是，如果你坚持使用 NPM，你应该没问题。

npm install --save 传单

【参考方案4】：

你有两个解决方案：

在您的Webpack 文件中排除一些具有url() 的CSS 文件，这不是一个很好的解决方案。 在您的Webpack 配置和配置url-loader 中使用url-loader 作为静态，所有加载程序都会忽略url 地址。

我会遇到同样的问题并用第二种方法解决它。

【讨论】：

您能否提供一个配置的代码示例。你是如何将url-loader 设置为静态的？