代码之家 › 专栏 › 技术社区 › Develoger

Webpack+React+多个SVG加载程序问题

webpack reactjs javascript

Develoger · 技术社区 · 8 年前

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

这是 module: { rules: [ 有关my中SVG加载程序的部分 webpack.config.js

是否有人使用过类似的设置,并且在React中导入svg文件时遇到过问题?

我既需要在CSS中加载svg,也需要在React中导入svg。如果我使用

url加载器单独CSS工作。
如果我在react works中单独使用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';

2 回复 | 直到 8 年前

Develoger 8 年前

显然,在导入过程中,不需要在实际JS/CSS代码中引用加载器,处理加载器的最干净方法是使用其中一个with exclude属性:

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

ÐÐ°Ð·Ð°Ñ ÐÐµÐ»ÑÐ½Ð¸Ðº 8 年前

更好的方法是使用 oneOf ,但使用 include 选项,该选项在逻辑上比 exclude 选项:

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

推荐文章

Brandon Mulas · 如何在electronic+webpack中从Main进程获取javascript对象到Renderer进程

1 年前