Webpack 5 和 SVG 参数

Question

我更新到 Webpack 5，发现 url-loader 已被弃用，取而代之的是 asset 模块。我可以像这样加载 SVG：

        {
            test: /\.svg(\?.*)?$/,
            exclude: [path.resolve(__dirname, 'test')],
            type: 'asset/inline',
        },

但是像 fill 和 lines 这样的参数对图像没有任何影响：

    background-image: url('~assets/img/icon_home.svg?fill=#{$normal-fill} .filling&stroke=#{$normal-stroke}');

我已经尝试了所有加载器，svg-url-loader、svg-inline-loader、vue-svg-loader、new-url-loader 等，但它们似乎都没有达到 url-loader 在 Webpack 4 中成功完成的效果：

        {
            test: /\.svg(\?.*)?$/,
            exclude: [path.resolve(__dirname, 'test')],
            use: ['url-loader', 'svg-transform-loader'],
        },

Answer 1

我将此配置用于 Webpack 5。

{
    test: /\.svg(\?.*)?$/, // match img.svg and img.svg?param=value
    exclude: path.resolve(__dirname, 'src/media/sprite-images'),
    use: [
        'svg-transform-loader'
    ],
    type: 'asset/inline'
},

然后填充工作正常：

background: url("arr.svg?fill=%23fff") center no-repeat