reactjs - 两个 svgo-loader 冲突

Question

我正在使用webpack构建 svg-sprite。

但有一个问题:部分图标有多种颜色，而部分图标只有一种颜色。它们按原样使用。

一种颜色图标应根据 :hover/:active 改变颜色。

并且，根据此我应该清理一种颜色图标的填充属性。

我无法使用多色的。

我决定将它们分开到不同的文件夹并创建两个 webpack 规则:

{
  test: /icon\/.*\.svg$/,
  loaders: [
    'svg-sprite-loader',
    {
      loader: 'svgo-loader',
      options: {
        plugins: [
          // ...
        ],
      },
    },
  ],
},
{
  test: /monoicon\/.*\.svg$/,
  loaders: [
    'svg-sprite-loader',
    {
      loader: 'svgo-loader',
      options: {
        enforce: 'pre',
        plugins: [
          // ...
          { removeAttrs: { attrs: '(fill|stroke)' } },
        ],
      },
    },
  ],
},

一切都很好，但实际上不起作用。我正在进入控制台:

…/monoicon/cross.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i…

挖掘我发现的网络:

It was a problem with the way I was loading it. you need to prefix require("-!... when you're overriding other loaders...

https://github.com/jhamlet/svg-react-loader/issues/3#issuecomment-146334228

所以看起来问题的根源在于我必须使用 svgo-loader 进行规则。在每个 svg 导入中重写 webpack 加载器规则——有点糟糕的想法。那么我该如何以适当的方式解决这个问题呢？

问候。

Answer 1

我是个白痴。编写正则表达式:

/\/icon\/.*\.svg$/
/\/monoicon\/.*\.svg$/