vue3+vite+antd如何實(shí)現(xiàn)自定義主題
更新時(shí)間：2024年03月21日 11:03:50 作者：幸福淺曖
這篇文章主要介紹了vue3+vite+antd如何實(shí)現(xiàn)自定義主題問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、首先需要下載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配置項(xiàng)
加入以下代碼
modifyVars中即為你需要自定義的主題字段
主題樣式字段可從antd官網(wǎng)查找 antd官網(wǎng)-自定義主題，根據(jù)說(shuō)明改成你自己的樣式即可
// 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
如果未生效
請(qǐng)先檢查注意中的兩個(gè)點(diǎn)
如果配置了按需引入，需要對(duì) 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'
})
]
})
]
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(2)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個(gè)值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過(guò)watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例
本文主要介紹了VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue導(dǎo)出Excel文件的四種實(shí)現(xiàn)方式
文章介紹了四種在Vue.js中導(dǎo)出Excel文件的方法,包括前端使用xlsx庫(kù)、exceljs,使用現(xiàn)成組件vue-json-excel,以及后端生成,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn),推薦根據(jù)具體需求選擇合適的方法,需要的朋友可以參考下2025-12-12
VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了在vue中使用console.log無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09