Webpack + React +多个SVG加载器问题

Posted 2021-05-06

{
  test: /\.svg/,
  use: [
    {
      loader: 'url-loader'
    },
    {
      loader: 'svg-react-loader'
    }
  ]
}

这是关于我的module: { rules: [中的SVG加载器的webpack.config.js部分

任何人使用类似的设置，并在React中导入svg文件有问题？

我需要在CSS中加载svg并在React中导入它们。如果我使用

• url-loader单独的CSS工作。
• 如果我在React工作中单独使用svg-react-loader导入。

但是React中的一起导入失败，出现以下错误：

Module build failed: Error: Non-whitespace before first tag.

以下是我在React cmp中导入SVG的方法：

import StarIcon from 'svg-react-loader!mdi-svg/svg/star.svg';

答案

显然，最简单的处理加载器的方法是在导入过程中不需要在实际的JS / CSS代码中引用加载器，而是使用带有exclude属性的oneOf：

    {
      test: /\.svg$/,
      oneOf: [
        {
          exclude: path.resolve(__dirname, '../src/'),
          use: 'svg-react-loader'
        },
        {
          exclude: path.resolve(__dirname, '../node_modules/'),
          use: 'url-loader'
        },
      ],
    }

另一答案

更好的方法是使用oneOf，但使用include选项，这在逻辑上比exclude选项更正确：

{
  test: /\.svg$/,
  oneOf: [
    {
      include: path.resolve(__dirname, '../node_modules/'),
      use: 'svg-react-loader'
    },
    {
      include: path.resolve(__dirname, '../src/'),
      use: 'url-loader'
    },
  ],
}