关于vue.js: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'  })],}),

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