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

我是个白痴。写regexp：

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

两个svgo-loader冲突

1 个答案: