关于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'
  })],
}),

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