美文网首页
vue3+svgo-loader+svg-sprite-load

vue3+svgo-loader+svg-sprite-load

作者: 花亭子老纯 | 来源:发表于2021-11-03 16:01 被阅读0次

    按照现有的网上方案会报错:

    Syntax Error: Error: Plugin name should be specified
    

    意思就是:需要配置一个插件名字,想看官网的去这里: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()
      },

    相关文章

      网友评论

          本文标题:vue3+svgo-loader+svg-sprite-load

          本文链接:https://www.haomeiwen.com/subject/yvhczltx.html