vue3+vite+antd如何實現(xiàn)自定義主題
更新時間：2024年03月21日 11:03:50 作者：幸福淺曖
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、首先需要下載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官網(wǎng)查找 antd官網(wǎng)-自定義主題，根據(jù)說明改成你自己的樣式即可
// 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'
})
]
})
]
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了開發(fā)一個封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue項目打包后請求地址錯誤/打包后跨域操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue離開頁面時如何銷毀定時器，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+Express實現(xiàn)登錄注銷功能的實例代碼
這篇文章主要介紹了Vue+Express實現(xiàn)登錄,注銷功能，本文通過實例代碼講解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實例方法
在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)條件疊加搜索的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Vue中關(guān)閉當(dāng)前頁面的方法與原生JavaScript類似,都是通過window對象的close方法實現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁面的方法,需要的朋友可以參考下2023-09-09