两个 svgo-loader 冲突

Question

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

\n

但有一个问题：部分图标有多种颜色，而部分\xe2\x80\x94\xc2\xa0只有一种颜色。它们按原样使用。

\n

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

\n

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

\n

我无法用多色的来做到这一点。

\n

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

\n

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

\n

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

\n

\xe2\x80\xa6/monoicon/cross.svg\nModule build failed: Error: Error in parsing SVG: Non-whitespace before first tag.\nLine: 0\nColumn: 1\nChar: i\xe2\x80\xa6\n

\n

挖掘网络我发现：

\n

\n

这是我加载方式的问题。require("-!...当你覆盖其他加载器时，你需要添加前缀......

\n

\n

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

\n

所以看起来问题的根源在于我必须遵守svgo-loader. 在每个 svg import \xe2\x80\x94\xc2\xa0 中重写 webpack 加载器规则，有点糟糕的想法。那么我该如何以适当的方式解决这个问题呢？

\n

问候。

\n

Answer 1

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

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