近期在使用vite、vue3.x、ant design3.x尝试搭建框架

在UI库配置的时候，尝试了如下几种方式进行定制主题（自定义主题）

本次使用库版本

"ant-design-vue": "^2.2.8",
"vite": "^2.8.4",
"less": "^4.1.2",
"less-loader": "^10.2.0",

操作步骤

安装ui库

yarn add ant-design-vue@next

采用vite按需加载方式

如果你使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib

修改vite.config.ts

+ import Components from "unplugin-vue-components/vite";
+ import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

 plugins: [
     ...otherPlugins,
+     Components({
+       resolvers: [AntDesignVueResolver({ importStyle: true })],
+     }),
+   ],

截止到此处ant.design ui已经可以正常使用了，为了丰富扩展主题，我们还需要作如下操作

安装less和less-loader

yarn add less
yarn add less-loader  --dev

这样，在*.vue就可使用less样式了，如

<style lang="less" scope>
.text {
 color:red;
}

继续在vite.config.ts中扩展

export default defineConfig({
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        charset: false,
        modifyVars: {
          // "@primary-color": "red",
        },
      },
    },
  },
});

自定义主题

  1. 通过vite配置，进行主题定制

当unplugin-vue-components的AntDesignVueResolver中importStyle属性为true或者css时，如法进行自定义，需修改如下

AntDesignVueResolver({ importStyle: "less" })]

这样可以再vite.config.ts中通过设定modifyVars来达到自定义主题的目的，如

modifyVars: {
  "@primary-color": "red",
},
  1. 通过业务代码挂在less样式进行主题定制

当unplugin-vue-components的AntDesignVueResolver中importStyle属性为true或者css时，如法进行自定义，需修改如下

AntDesignVueResolver({ importStyle: "false" })]

在app.vue中引入样式文件

<style lang="less">
@import "./assets/global.less";
</style>

global.less内容如下：

@import "ant-design-vue/dist/antd.less"; //引入样式antdesign官方样式文件
@primary-color: #00bd7e;// 自定义全局主色
@link-color: #000000; //自定义链接颜色