vue3+vite+antd如何实现自定义主题
作者：幸福浅暧
这篇文章主要介绍了vue3+vite+antd如何实现自定义主题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、首先需要下载less、less-loader
npm i less less-loader --save
二、main.ts中引入antd样式的地方要改为.less
//不要使用 import "ant-design-vue/dist/antd.css"; //注意要使用.less import "ant-design-vue/dist/antd.less"
三、vie.config.ts文件，找css配置项
加入以下代码
modifyVars中即为你需要自定义的主题字段
主题样式字段可从antd官网查找 antd官网-自定义主题，根据说明改成你自己的样式即可
// modifyVars即为你需要修改的主题
css: {
preprocessorOptions: {
less: {
modifyVars: {
'primary-color': '#FF763B',
'border-color-base': '#FF763B',
'box-shadow-base': '0 2px 8px #FF763B'
},
javascriptEnabled: true,
},
}
}
注意：
- 1、一定要下载less、less-loader包
- 2、main.ts中引入antd样式的地方一定要改为.less
如果未生效
请先检查注意中的两个点
如果配置了按需引入，需要对 unplugin-vue-components 包
在vite.config.ts做配置
npm i unplugin-vue-components
vite.config.ts引入组件并配置
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: 'less'
})
]
})
]
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。