Webpack 5升级后SVG的fill、stroke参数失效问题求助

直接上可行配置，替代原Webpack4中url-loader+svg-transform-loader的组合：

{
  test: /\.svg(\?.*)?$/,
  exclude: [path.resolve(__dirname, 'test')],
  use: [
    {
      loader: 'svg-transform-loader',
      options: {
        // 根据你的参数规则配置transform，匹配CSS中传入的fill/stroke参数
        transform: [
          {
            query: 'fill',
            selector: '.filling',
            attr: 'fill'
          },
          {
            query: 'stroke',
            selector: '.filling',
            attr: 'stroke'
          }
        ]
      }
    }
  ],
  type: 'asset/inline'
}

原理说明 #

• Webpack5的asset/inline完全替代了url-loader的inline功能，会将处理后的SVG转为base64内嵌到代码中。
• 单独用asset/inline时，Webpack不会解析URL中的查询参数（?fill=xxx这类）去修改SVG内容，所以你的fill/stroke参数无效。
• 保留svg-transform-loader的作用就是解析这些查询参数，动态修改SVG中对应选择器元素的fill、stroke属性，之后再交给asset/inline处理，完美复现Webpack4时的效果。

注意事项 #

• 确保svg-transform-loader是最新版本，兼容Webpack5（可通过npm install svg-transform-loader@latest更新）。
• CSS中的URL写法保持不变：background-image: url('~assets/img/icon_home.svg?fill=#{$normal-fill} .filling&stroke=#{$normal-stroke}')，参数会被loader正确解析。

内容的提问来源于stack exchange，提问作者Xvs