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

vue3+svgo-loader+svg-sprite-load

作者: chunyangyang | 来源:发表于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://github.com...

网友评论

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

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