vite配置ant design vue3按需引入后自定义主题色失效

使用 unplugin-vue-components/viteunplugin-vue-components/resolvers 内的 AntDesignVueResolver 进行 antdv 组件的按需引入,但是会导致 antdv 的自定义主题失效。

然而 antdv 官网在自定义主题的地方,并没有写 vite 里面如何处理,虽然处理方式和 vue-cli 相似,但是在使用 AntDesignVueResolver 按需引入后,自定义主题色并没有按预期生效。

网上有人的处理办法是 ,在 main.ts 内全量引入 import 'ant-design-vue/dist/antd.less',这不符合我们按需引入的预期,也不优雅。

解决办法:

  1. 更改主题色配置,开启 less
    ...
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            "primary-color": "#000",
            "link-color": "red"
          },
          javascriptEnabled: true
        }
      }
    },
    ...
    
  2. AntDesignVueResolver 增加配置
    plugins: [
    	...
         Components({
           resolvers: [
             AntDesignVueResolver({
               importStyle: "less", //<--------看这行
             })
           ]
         }),
    	...
    ],
    

重启项目,第一次会久一点

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值