Ant design Vue在Vite项目中如何自定义主题

笔者在Ant Design Vue文档中没找到关于在Vite项目中自定义主题的配置，经过一番研究发现与Vue-cli3配置大同小异便随手记录下来。

步骤

1. 安装less(已下载的同学可以跳过)
   npm install --save-dev less

2. 将main.ts(js)中的import 'ant-design-vue/dist/antd.css' 改为 import 'ant-design-vue/dist/antd.less'

3. 编辑项目根目录的vite.config.ts(js),modifyVars属性对应的就是自定义的颜色值

   export default{
   	...
   	css: {
   	    preprocessorOptions: {
   	      less: {
   	        modifyVars: {
   	          'primary-color': '#123',
   	          'link-color': 'red',
   	        },
   	        javascriptEnabled: true,
   	      }
   	    },
   	  },
   	...
   }
   

4. 刷新页面即可生效(项目正在运行的情况不刷新也会自动更新生效)