两个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…

挖掘网络我发现：

我加载它的方式有问题。 您需要在require("-!...覆盖其他加载程序时添加前缀...

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

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

问候。

Answer 1

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

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