Ant design vue 2.x 版本在 vue3 中的主题定制

Ant design vue 2.x 版本在 vue3 中的主题定制

• 我们是在vue3.0 项目中使用 ant design vue 2.0，解决流程和官网思路一致，直接使用 less 变量层叠即可，但是有一个问题就是需要全量引入 style 文件。

具体如图展示

main.js

import { createApp } from 'vue';
import router from '@/router';
import App from './App.vue';
import {
  Cascader,
} from 'ant-design-vue';
import { PageContainer, ProProvider, TransformVnode } from '@/components';
import { useIcons } from '@/icons';

import './app.less'; // 重点是这个  因为我们的css文件全部都在这个less文件中进行了引入  所以直接对app.less进行操作即可

const app = createApp(App);
app
  .use(router)
  .component(PageContainer.name, PageContainer)
  .component(TransformVnode.name, TransformVnode);
useIcons(app);
app.mount('#app');

app.less

@import '~ant-design-vue/es/style/themes/default.less';
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件

// 我们这里只需要修改一个主题色 所以就不再创建新的less 文件 徒增麻烦了 直接层叠变量即可
//@import 'your-file.less'; // 用于覆盖上面定义的变量
@primary-color: #bb133e; // 全局主色 这里是已经修改过了的主题色 后续想要配置其他变量 请移步查看对应变量即可

我们这里只需要修改一个主题色 所以就不再创建新的less 文件 徒增麻烦了 直接层叠变量即可
其他配置变量可查询： 所有样式变量可以在 这里 找到
修改完之后，如项目未直接改变style，则可以重新启动项目即可