前言
在引入外部組件的時候，想要修改默認樣式，可以通過class修改，但一般會有權(quán)重不夠等各種原因，官網(wǎng)其實列出了一套主題定制的方案，通過覆蓋配置文件來修改樣式，官網(wǎng)地址：主題定制
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、Less
因為Vant 使用了 Less 對樣式進行預(yù)處理，并內(nèi)置了一些樣式變量，可以通過替換樣式變量即可定制你自己需要的主題。
給你的項目配置less：
|
1
2
|
npm install less --save-dev
npm install less-loader --save-dev
|
配置完先試一試less可不可以使用，如果報錯，一般是因為版本高導(dǎo)致的。
可以試著降低版本
二、引入你的組件
比如我這里引入的是Tab標簽頁組件
|
1
2
3
4
5
6
|
<van-tabs v-model="active">
|
1
2
3
4
5
6
7
|
export default {
data() {
return {
active: 2,
};
},
};
|
它有默認樣式，比如active的字體顏色，底部狀態(tài)顏色等。
三、修改配置文件
第一步：直接引入less文件
在main.js里引入：
|
1
|
import 'vant/lib/index.less';
|
第二步：修改樣式變量
找到你的vue.config.js文件，沒有就在package.json同級新建一個配置文件，添加一下代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'text-color': '#111',
'border-color': '#eee',
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
|
可以通過直接修改變量，也可以把清單列好成一個less文件引入，注意，如果less版本低的話，按照代碼中的注釋來。
再回到之前標簽組件的使用文檔，往下滑找的樣式變量這一部分
那么它定義的一些關(guān)于組件的樣式，你可以對著它的名字來修改你需要修改的樣式，比如@tab-active-text-color這一個變量，應(yīng)該就是表示active狀態(tài)后字體的顏色，好，我現(xiàn)在需要將它修改為我想要的顏色，那么就在配置文件中修改一下
再重啟下服務(wù)器，就可以看到組件的樣式改變了
總結(jié)
到此這篇關(guān)于詳解基于Vue cli開發(fā)修改外部組件Vant默認樣式的文章就介紹到這了,更多相關(guān)Vuecli Vant默認樣式內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/AAAAahao_/article/details/115387694
- vue.js
這篇文章主要介紹了用vite搭建vue3應(yīng)用的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下...
7912022-01-22
- vue.js
這篇文章主要介紹了Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋...
9632022-02-21
- vue.js
看過很多人講vue的生命周期，但總是被繞的云里霧里，尤其是自學(xué)的同學(xué)，可能js的基礎(chǔ)也不是太牢固，聽起來更是吃力，那我就已個人之淺見，以大白話...
7992021-12-22
- vue.js
這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下...
6432022-02-12
- vue.js
這篇文章主要介紹了Vue多選列表組件深入詳解，這個是vue的基本組件，有需要的同學(xué)可以研究下...
6752022-01-25
- vue.js
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的...
10222021-12-31
- vue.js
最近做了一個手機端系統(tǒng)，其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題，現(xiàn)已解決，下面分享一下實現(xiàn)過程，感興趣的朋友一起看看吧...
4302022-03-03
- vue.js
這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下...
6372022-01-25
主站蜘蛛池模板：
日韩综合网
|
xxx中国bbbwww|
春光乍泄在线
|
法国贵妇一级伦理hd
|
美女黄金大片视频免费看
|
亚洲视频中文
|
亚洲精品青青草原avav久久qv
|
欧美怡红院视频一区二区三区
|
色色色色色色网
|
欧美a级完整在线观看
|
九九九九九九精品免费
|
我与岳乱短篇小说
|
四虎影院久久
|
国产拍拍
|
99热这里只有精品免费
|
久久99r66热这里有精品
|
五月婷婷在线观看
|
91久久综合九色综合欧美98
|
青青草99
|
久久热国产在线视频
|
日韩亚洲人成网站在线播放
|
精品一区二区三区免费观看
|
高清麻生希在线
|
日韩欧美精品
|
日韩一级精品视频在线观看
|
国产精品高清一区二区三区不卡
|
9久re热视频这里只有精品
|
国产在线视频色综合
|
国产在线98福利播放视频免费
|
欧美国产合集在线视频
|
日本一道本中文字幕
|
亚洲精品久久啪啪网站成年
|
久久青青草原精品国产软件
|
xxxx性欧美极品另类
|
我在厨房摸岳的乳HD在线观看
|
成人久久久
|
息与子中文字幕完整在线
|
日本片免费观看一区二区
|
色人阁图片|
亚洲精品αv一区二区三区
亚洲精品91大神在线观看
|
亚洲精品国产福利片
|
|
