vue中vant組件樣式失效問題及解決
更新時間：2022年04月25日 10:28:46 作者：Saga?Two
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vant組件樣式失效
vue項(xiàng)目中引入vant組件，若發(fā)現(xiàn)vant組件樣式失效
通常有以下幾種解決方法
方法一：引入全局樣式
在引入vant組件的地方或者全局引入vant組件所有的樣式，引入方法為：在vue引入vant的頁面中，添加以下代碼：
import 'vant/lib/index.css'
這樣可以引入vant全部樣式，不過通常我們可以按需引入，如法二，局部引入部分樣式即可。
方法二：局部引入樣式
顧名思義，我們需要使用哪個組件，就引入哪個組件樣式即可，比如我們只使用按鈕組件，則只需要引入按鈕樣式，如下:
import 'vant/lib/button/style'
方法三：插件自動引入
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉(zhuǎn)換為按需引入的方式。
第一步需要安裝插件：
# 安裝插件 npm i babel-plugin-import -D
第二步在***.babelrc***或***babel.config.js***的對應(yīng)位置添加如下代碼，重啟之后即可生效。
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 libraryDirectory
{
? "plugins": [
? ? ["import", {
? ? ? "libraryName": "vant",
? ? ? "libraryDirectory": "es",
? ? ? "style": true
? ? }]
? ]
}
// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
? plugins: [
? ? ['import', {
? ? ? libraryName: 'vant',
? ? ? libraryDirectory: 'es',
? ? ? style: true
? ? }, 'vant']
? ]
};修改vant組件樣式
<style scoped> 添加scoped
? ? .searchIcon >>> .van-icon-search{color:#fff;}
</style>searchIcon是新起的class名字 van-icon-search是vant組件標(biāo)簽名字 中間用>>>穿透 即可修改vant自帶組件class名
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中js文件使用vue的this實(shí)例說明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解vue-cli+element-ui樹形表格(多級表格折騰小計(jì))
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級表格折騰小計(jì)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了mpvue 單文件頁面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過配置 mpvue-config-loader 來實(shí)現(xiàn)在 vue 文件內(nèi)書寫小程序的頁面配置，感興趣的小伙伴們可以參考一下2018-12-12
本文主要介紹了vue中三種不同插槽使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue遞歸生成樹狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)骨架屏的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue Element-ui表格實(shí)現(xiàn)樹形結(jié)構(gòu)表格
這篇文章主要為大家詳細(xì)介紹了vue Element-ui表格實(shí)現(xiàn)樹形結(jié)構(gòu)表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
在本篇文章里小編給大家分享了關(guān)于vue文件運(yùn)行的方法教學(xué)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02