Ant Design Vue+Vite+Vue3 使用自定义主题

1,158 阅读1分钟

版本

需要注意less版本 版本不同可能会导致less语法不同
官方提示 less-loader版本为 less-loader@6.0.0

 "less": "^2.7.3",
 "less-loader": "^6.0.0",
 "vite": "^3.1.0",
 "ant-design-vue": "^3.2.13",

首先必须先引入官方less全局配置文件

@import "ant-design-vue/dist/antd.less"; 

注意项

在vite.config.js做配置中做配置,需要注意此配置项:
importStyle不可设置为css或者是true,否则配置的自定义颜色不生效
颜色不可使用rgb色值,否则less可能会报错

方法一 在vite.config.js中做修改配置

 export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: "less" })],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        charset: false,
        modifyVars: {
          "@primary-color": "#2cf629",
        },
      },
    },
  },
});

方法二 通过自定义样式覆盖

在引入官方less自定义主题样式文件后进行覆盖

@import "ant-design-vue/dist/antd.less";
@primary-color: red; // 全局主色