踩坑笔记：（Vue中）解决无法用CSS更改svg颜色的问题

在码代码中，下载SVG并引入时，有时候会出现CSS无法更改SVG的颜色情况，

于是我打开svg文件，找到了其中的原因

这里的path标签里的fill是填充颜色的意思，只要有这个属性，更改CSS就不会对其颜色造成影响，

所以，解决的方法很简单，把它删了就完事了~

但又有一个问题，如果引入了N多个svg，我还得一个一个去找它有没有fill，再一个一个去删除不成？那也太蠢了

所以再进一步得搜索，发现了一个好东西——svgo-loader（这个o就是优化的意思），将其配置到vue.config.js文件中

.use('svgo-loader').loader('svgo-loader')  // 
.tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
//removeAttrs发现你加载了svg，就会把svg的fill属性删除

此时，完整的vue.config.js如下

const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack:config =>{
    const dir = path.resolve(__dirname,'src/assets/icons')

    config.module
        .rule('svg-sprite')
        .test(/\.svg$/)
        .include.add(dir).end() // 包含 icons 目录
        .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
        .use('svgo-loader').loader('svgo-loader')
        .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
  }
}

注意要安装一下

yarn add --dev svgo-loader@2.2.1

这样一来，就可以轻松愉快地给svg改颜色了~