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

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 就可以工作。
• 如果我单独使用 svg-react-loader 则可以在 React 中导入。

但是 React 中的 Together 导入失败并出现以下错误：

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

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

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