Я обновился до Webpack 5 и обнаружил, что url-loader устарел в пользу модулей ресурсов. Я могу загрузить SVG так:
{
test: /\.svg(\?.*)?$/,
exclude: [path.resolve(__dirname, 'test')],
type: 'asset/inline',
},
Но ни один из параметров, таких как заливка и обводка, не влияет на изображение:
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'],
},



Я использую эту конфигурацию для 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
Да, loader: 'svg-transform-loader' тоже работает. Я перепробовал десятки комбинаций, но, кажется, забыл попробовать svg-transform-loader с type: asset/inline.
Спасибо!