詳解基于Vue cli開發(fā)修改外部組件Vant默認樣式
前言
在引入外部組件的時候，想要修改默認樣式，可以通過class修改，但一般會有權重不夠等各種原因，官網其實列出了一套主題定制的方案，通過覆蓋配置文件來修改樣式，官網地址：主題定制
提示：以下是本篇文章正文內容，下面案例可供參考
一、Less
因為Vant 使用了 Less 對樣式進行預處理，并內置了一些樣式變量，可以通過替換樣式變量即可定制你自己需要的主題。
給你的項目配置less：
npm install less --save-dev npm install less-loader --save-dev
配置完先試一試less可不可以使用，如果報錯，一般是因為版本高導致的。
可以試著降低版本
"less-loader": "^5.0.0",
二、引入你的組件
比如我這里引入的是Tab標簽頁組件
<van-tabs v-model="active"> <van-tab title="標簽 1">內容 1</van-tab> <van-tab title="標簽 2">內容 2</van-tab> <van-tab title="標簽 3">內容 3</van-tab> <van-tab title="標簽 4">內容 4</van-tab> </van-tabs>
export default {
data() {
return {
active: 2,
};
},
};
它有默認樣式，比如active的字體顏色，底部狀態(tài)顏色等。
三、修改配置文件
第一步：直接引入less文件
在main.js里引入：
import 'vant/lib/index.less';
第二步：修改樣式變量
找到你的vue.config.js文件，沒有就在package.json同級新建一個配置文件，添加一下代碼：
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項。
lessOptions: {
modifyVars: {
// 直接覆蓋變量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
可以通過直接修改變量，也可以把清單列好成一個less文件引入，注意，如果less版本低的話，按照代碼中的注釋來。
再回到之前標簽組件的使用文檔，往下滑找的樣式變量這一部分
那么它定義的一些關于組件的樣式，你可以對著它的名字來修改你需要修改的樣式，比如@tab-active-text-color這一個變量，應該就是表示active狀態(tài)后字體的顏色，好，我現(xiàn)在需要將它修改為我想要的顏色，那么就在配置文件中修改一下
再重啟下服務器，就可以看到組件的樣式改變了
總結
到此這篇關于詳解基于Vue cli開發(fā)修改外部組件Vant默認樣式的文章就介紹到這了,更多相關Vuecli Vant默認樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
最近入職了新公司,接手了一個新拆分出來的Vue項目,針對該項目做了個打包優(yōu)化,把經驗分享出來,下面這篇文章主要給大家介紹了關于vue項目打包優(yōu)化的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
Vue項目中數(shù)據(jù)的深度監(jiān)聽或對象屬性的監(jiān)聽實例
這篇文章主要介紹了Vue項目中數(shù)據(jù)的深度監(jiān)聽或對象屬性的監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue中的同步和異步調用順序，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了詳解vue 兼容IE報錯解決方案，詳細的介紹了幾種原因及其解決方案，非常具有實用價值，需要的朋友可以參考下2018-12-12
Vue+Echarts報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了Vue+Echarts報錯Cannot?set?properties?of?undefined?(setting?‘plate‘)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了vue2.0開發(fā)入門筆記之.vue文件的生成和使用 ,非常具有實用價值，需要的朋友可以參考下2017-09-09
Vue環(huán)境搭建+VSCode+Win10的詳細教程
這篇文章主要介紹了Vue環(huán)境搭建+VSCode+Win10,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了VUE項目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10