4

我有一个带有 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, // 传单使用相对路径
              最小化：假，
              模块：假，
            }
          }
        ]
      },

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

4

4 回答 4

1

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

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

另请参阅yarn Github 存储库中的这个已关闭问题。

于 2017-09-29T12:02:39.863 回答
0

你有两个解决方案：

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

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

于 2018-01-15T15:13:36.670 回答
0

Looking into node_modules in more detail, yarn add leaflet@1.0.3 puts no image directory or images into node_modules/leaflet/dist/. Copying the images in from a clone of the repo resolves the problem.

于 2017-04-12T10:43:10.977 回答
0

我也可以验证至少在windows下

纱线添加传单

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

npm install --save 传单

于 2017-06-05T05:36:57.603 回答