Question

{
  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';

Answer 1

显然，在导入期间无需在实际JS / CSS代码中引用加载器的最简单的处理加载器的方法是使用oneOf和exclude属性：

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

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

1 个答案: