快捷導(dǎo)航

詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式

更新時(shí)間：2021年04月04日 09:05:01 作者：阿阿啊啊阿阿豪

這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在引入外部組件的時(shí)候，想要修改默認(rèn)樣式，可以通過class修改，但一般會(huì)有權(quán)重不夠等各種原因，官網(wǎng)其實(shí)列出了一套主題定制的方案，通過覆蓋配置文件來修改樣式，官網(wǎng)地址：主題定制

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、Less

因?yàn)閂ant 使用了 Less 對(duì)樣式進(jìn)行預(yù)處理，并內(nèi)置了一些樣式變量，可以通過替換樣式變量即可定制你自己需要的主題。

給你的項(xiàng)目配置less：

npm install less --save-dev
npm install less-loader --save-dev

配置完先試一試less可不可以使用，如果報(bào)錯(cuò)，一般是因?yàn)榘姹靖邔?dǎo)致的。
可以試著降低版本

"less-loader": "^5.0.0",

二、引入你的組件

比如我這里引入的是Tab標(biāo)簽頁組件

<van-tabs v-model="active">
 <van-tab title="標(biāo)簽 1">內(nèi)容 1</van-tab>
 <van-tab title="標(biāo)簽 2">內(nèi)容 2</van-tab>
 <van-tab title="標(biāo)簽 3">內(nèi)容 3</van-tab>
 <van-tab title="標(biāo)簽 4">內(nèi)容 4</van-tab>
</van-tabs>

export default {
 data() {
 return {
  active: 2,
 };
 },
};

它有默認(rèn)樣式，比如active的字體顏色，底部狀態(tài)顏色等。

在這里插入圖片描述

三、修改配置文件

第一步：直接引入less文件

在main.js里引入：

import 'vant/lib/index.less';

第二步：修改樣式變量

找到你的vue.config.js文件，沒有就在package.json同級(jí)新建一個(gè)配置文件，添加一下代碼：

module.exports = {
 css: {
 loaderOptions: {
  less: {
  // 若 less-loader 版本小于 6.0，請(qǐng)移除 lessOptions 這一級(jí)，直接配置選項(xiàng)。
  lessOptions: {
   modifyVars: {
   // 直接覆蓋變量
   'text-color': '#111',
   'border-color': '#eee',
   // 或者可以通過 less 文件覆蓋（文件路徑為絕對(duì)路徑）
   hack: `true; @import "your-less-file-path.less";`,
   },
  },
  },
 },
 },
};

可以通過直接修改變量，也可以把清單列好成一個(gè)less文件引入，注意，如果less版本低的話，按照代碼中的注釋來。
再回到之前標(biāo)簽組件的使用文檔，往下滑找的樣式變量這一部分

在這里插入圖片描述

那么它定義的一些關(guān)于組件的樣式，你可以對(duì)著它的名字來修改你需要修改的樣式，比如@tab-active-text-color這一個(gè)變量，應(yīng)該就是表示active狀態(tài)后字體的顏色，好，我現(xiàn)在需要將它修改為我想要的顏色，那么就在配置文件中修改一下

在這里插入圖片描述

再重啟下服務(wù)器，就可以看到組件的樣式改變了

在這里插入圖片描述

總結(jié)

到此這篇關(guān)于詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式的文章就介紹到這了,更多相關(guān)Vuecli Vant默認(rèn)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: