前言
在引入外部組件的時候，想要修改默認樣式，可以通過class修改，但一般會有權重不夠等各種原因，官網其實列出了一套主題定制的方案，通過覆蓋配置文件來修改樣式，官網地址：主題定制
提示：以下是本篇文章正文內容，下面案例可供參考
一、Less
因為Vant 使用了 Less 對樣式進行預處理，并內置了一些樣式變量，可以通過替換樣式變量即可定制你自己需要的主題。
給你的項目配置less：
|
1
2
|
npm install less --save-devnpm install less-loader --save-dev |
配置完先試一試less可不可以使用，如果報錯，一般是因為版本高導致的。
可以試著降低版本
|
1
|
"less-loader": "^5.0.0", |
二、引入你的組件
比如我這里引入的是Tab標簽頁組件
|
1
2
3
4
5
6
|
<van-tabs v-model="active"> <van-tab id="codetool">
它有默認樣式，比如active的字體顏色，底部狀態顏色等。
三、修改配置文件第一步：直接引入less文件在main.js里引入：
第二步：修改樣式變量找到你的vue.config.js文件，沒有就在package.json同級新建一個配置文件，添加一下代碼：
可以通過直接修改變量，也可以把清單列好成一個less文件引入，注意，如果less版本低的話，按照代碼中的注釋來。
那么它定義的一些關于組件的樣式，你可以對著它的名字來修改你需要修改的樣式，比如@tab-active-text-color這一個變量，應該就是表示active狀態后字體的顏色，好，我現在需要將它修改為我想要的顏色，那么就在配置文件中修改一下
再重啟下服務器，就可以看到組件的樣式改變了
總結到此這篇關于詳解基于Vue cli開發修改外部組件Vant默認樣式的文章就介紹到這了,更多相關Vuecli Vant默認樣式內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！ 原文鏈接：https://blog.csdn.net/AAAAahao_/article/details/115387694 延伸 · 閱讀
精彩推薦
編輯推薦
閱讀排行 |
