ant-design-vue 3.0.0+ vite2.x 定制主题、动态主题

简单记录、方便参考 主要关注两个文件main.ts vite.config.ts和一个方法

一、静态主题

// main.ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.less'; // 静态自定义样式

createApp(App)
  .use(Antd)
  .mount('#app');

// vite.config.ts 文档没有vite相关配置 参考vue-cli 结合vite文档
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: { // 静态自定义样式
        modifyVars: {
          'primary-color': 'green',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    },
  },
});

二、动态主题

// main.ts 只需更换引入样式文件
import 'ant-design-vue/dist/antd.variable.min.css'; // 动态切换主题

// 切换主题的文件
import { ConfigProvider } from 'ant-design-vue';
const switchTheme = (color) => {
  ConfigProvider.config({
    theme: {
      primaryColor: color,
    },
  });
};

暂作记录 欢迎大家评论区深入讨论