vite配置ant design vue3按需引入后自定义主题色失效
vite配置antdv主题色;antdv自定义主题色失效;vite按需引入ant design vue组件后自定义主题色失效;ant design vue3自定义主题色;vite按需引入ant design vue
·
使用 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", //<--------看这行 }) ] }), ... ],
重启项目,第一次会久一点
更多推荐
所有评论(0)