禁用url（）检查css-loader

Question

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

ERROR in ./~/css-loader!./~/leaflet/dist/leaflet.css
Module not found: Error: Can't resolve './images/layers.png' in '/home/tim/work/portal/node_modules/leaflet/dist'
resolve './images/layers.png' in '/home/tim/work/portal/node_modules/leaflet/dist'
  using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist)
    using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist/images/layers.png)
      as directory
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png.js doesn't exist

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

{
        test: /\.css$/,
        exclude: [/node_modules/, /sanitize/],
        use: [
          'style-loader', 
          { 
            loader: 'css-loader',
            options: {
              url: false, // leaflet uses relative paths
              minimize: false,
              modules: false,
            }
          }
        ]
      },

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

Answer 1

我遇到了完全相同的问题并通过删除线条＆＃34;图像＆＃34;来修复它。来自我项目中的.yarnclean文件。

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

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

Answer 2

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

Answer 3

我还可以在windows下验证至少

  

纱线添加传单

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

  

npm install --save leaflet

Answer 4

您有两种解决方案：

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

我遇到了同样的问题，并以第二种方式修复它。