使用 unplugin-vue-components/vite
和 unplugin-vue-components/resolvers
内的 AntDesignVueResolver
进行 antdv 组件的按需引入,但是会导致 antdv 的自定义主题失效。
然而 antdv 官网在自定义主题的地方,并没有写 vite 里面如何处理,虽然处理方式和 vue-cli 相似,但是在使用 AntDesignVueResolver
按需引入后,自定义主题色并没有按预期生效。
网上有人的处理办法是 ,在 main.ts 内全量引入 import 'ant-design-vue/dist/antd.less'
,这不符合我们按需引入的预期,也不优雅。
解决办法:
- 更改主题色配置,开启 less
... css: { preprocessorOptions: { less: { modifyVars: { "primary-color": "#000", "link-color": "red" }, javascriptEnabled: true } } }, ...
- AntDesignVueResolver 增加配置
plugins: [ ... Components({ resolvers: [ AntDesignVueResolver({ importStyle: "less", //<--------看这行 }) ] }), ... ],
重启项目,第一次会久一点