Ant-Design-Vue-定制主题

发表于 | 分类于

方案一：全局引入

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

方案二：按需引入

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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插件来加载的，所以还要配置如下

1
2
3
4
5
6
7
Components({
  dirs: ["src/components"],
  resolvers: [AntDesignVueResolver({
    sideEffect: true,
    importStyle: 'less'
  })],
}),

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