vite配置antd实现切换主题

1. 安装依赖

yarn add antd
yarn add vite-plugin-import -D`

2. vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import createImportPlugin from 'vite-plugin-import'

export default defineConfig({
  plugins: [
    react(),
    createImportPlugin({
      onlyBuild: false, // 只在生产环境中使用
      babelImportPluginOptions: [
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true
        }
      ]
    })
  ],
  css: {
    // 指定传递给 CSS 预处理器的选项; 文件扩展名用作选项的键
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#00ab94', // 全局主色
          '@link-color': '#1DA57A', // 链接色
          '@border-radius-base': '2px', // 组件/浮层圆角
        }
      }
    }
  }
})

更多颜色变量

注：不需要在main.ts中引入 import 'antd/dist/antd.css' / import 'antd/dist/antd.less'