关于reactjs：两个svgo-loader冲突


Two svgo-loader conflict

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

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

一种颜色图标应根据：hover /：active更改颜色。

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

我不能处理多色的。

我决定将它们分离到不同的文件夹并创建两个Webpack规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
        test    : /icon\\/.*\\.svg$/,
        loaders : [
          'svg-sprite-loader',
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                a€|
              ]}}]},
      {
        test    : /monoicon\\/.*\\.svg$/,
        loaders : [
          'svg-sprite-loader',
          {
            loader: 'svgo-loader',
            options: {
              enforce: 'pre',
              plugins: [
                a€|
                { removeAttrs: { attrs: '(fill|stroke)' }},
              ]}}]},

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

1
2
3
4
5
a€|/monoicon/cross.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: ia€|

挖网我发现：

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加载程序规则，这有点奇怪。那么我如何以适当的方式解决这个问题呢？

致谢。

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

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