Ant Design Vue 定制主题

方案一：全局引入

在main.ts中引入组件库样式

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

方案二：按需引入

通过less 的modifyVars属性
vite.config.js

css: {
  preprocessorOptions: {
    less: {
      modifyVars: {
        //放到一个文件中
        hack: 'true; @import "@/styles/theme.less"',
        //直接使用变量
        'primary-color': '#1DA57A',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true
    }
  },
},

这种方法要注意的是，组件是通过unplugin-vue-components插件来加载的，所以还要配置如下

Components({
  dirs: ["src/components"],
  resolvers: [AntDesignVueResolver({
    sideEffect: true,
    importStyle: 'less'
  })],
}),

参考文章：官网 具体参考此文章