解决vue3 vite ts项目使用antdv自定义主题没有效果的问题

一、使用自定义主题

必须安装less和less-loader

在vite.config.ts中，这里的less的配置是关键

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

创建一个less文件用于覆盖原始的样式

这里的第一句@import 'ant-design-vue/dist/antd.less';，官方给的带~，会报错（antdv版本3.2.18）

@import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@primary-color: red; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

之后在main.ts文件中引入即可

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// import 'ant-design-vue/dist/antd.less'
import './test.less'
// import 'ant-design-vue/dist/antd.variable.min.css';
createApp(App).mount('#app')

效果图

二、使用自定义主题加切换主题

首先在main.ts文件中引入下面的文件

import 'ant-design-vue/dist/antd.variable.min.css'

 之后在合适的位置写下下面的代码，这里的代码来自，直接复制过来的

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

import { ConfigProvider } from 'ant-design-vue'
const colorStates = {
  primaryColor: 'red',
  errorColor: 'red',
  warningColor: 'red',
  successColor: 'red',
  infoColor: 'red'
}
function changeTheme() {
  ConfigProvider.config({
    theme: colorStates
  })
}

但是这种有的时候会不起作用，检查过后发现，切换主题之后--ant-primary-color这些颜色都改变了，但是又被替代了，是自动导入插件的原因，在vite.config.ts中的自动导入加入importStyle: false即可

Components({
      // ui库解析器，也可以自定义
      resolvers: [ElementPlusResolver(), AntDesignVueResolver({ importStyle: false })],
      dirs: ['src/components'],
      dts: 'src/auto-components.ts'
    })

代码参照：GitHub - sendya/preview-pro: Use pro-layout in vitejs. preview https://sendya.github.io/preview-pro/index.html