按照現(xiàn)有的網(wǎng)上方案會報錯:
Syntax Error: Error: Plugin name should be specified
意思就是:需要配置一個插件名字鸽素,想看官網(wǎng)的去這里:https://github.com/svg/svgo
上個圖:
image.png
不多說了上代碼:
chainWebpack: config => {
config.resolve.alias.set('@$', resolve('src'))
config.module.rules.delete('svg') //重點:刪除默認配置中處理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
.before('svg-sprite-loader')
.use('svgo-loader')
.loader('svgo-loader')
.options({
plugins: [
//!!!!!!!!!!!!!!!重點就是改這個位置户盯,加個插件名字
{
name: 'removeAttrs',
params: {
attrs: '(fill|stroke)'
}
}
]
})
.end()
},
錯誤的代碼也貼下吧瓢对,大家可以參考是不是和自己的一樣以防解決不了
chainWebpack: config => {
config.resolve.alias.set('@$', resolve('src'))
config.module.rules.delete('svg') //重點:刪除默認配置中處理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
fill: ''
})
.end()
.before('svg-sprite-loader')
.use('svgo-loader')
.loader('svgo-loader')
.options({
//!!!!!!!!!!!!!!!這個配置會報錯
plugins: [
{removeAttrs: {attrs: "path:fill"}}
]
})
.end()
},