基于AntDesign定制一套大屏主题工作中涉及到一些可视化项目，虽说用到的UI组件不多，但每次单独修改起来麻烦的很，于

工作中涉及到一些可视化项目，虽说用到的UI组件不多，但每次单独修改起来麻烦的很，于是参考AntDesign官网定制一套大屏主题

使用 modifyVars 的方式来进行覆盖变量，官网以webpack为例有说明，vite搭建的项目配置项有所不同点击可查看所有样式变量

export default defineConfig({
  plugins: [vue()],
  
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        charset: false,
        modifyVars: {
         //找到对应需要修改的变量在此配置
         "@primary-color": "#007f99",
         "@table-hover-bg": "#ebf5f7"
        }
      }
    }}
})

第二种方式建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量 1.vite.config.js 配置
```
 export default defineConfig({
   plugins: [vue()],
 
   css: {
     preprocessorOptions: {
       less: {
         javascriptEnabled: true
       }
     }}
 })
```
2.新建自定义less文件，点击可查看所有样式变量可在此文件基础上修改，antdesign 默认主题为蓝色系，同时还提供了一套暗黑主题，大屏在暗黑主题less文件基础上修改更加简单
注意：一定要在自定义主题前引入官方提供的less样式入口文件

3.接下来修改通用的变量或单独组件的样式达到自己想要的效果

4.在main.ts中引入自定义样式less文件

效果图>>>