vant樣式不生效問(wèn)題的解決辦法
樣式效果如下所示（tip：這里采用van-button標(biāo)簽）：
打開開發(fā)者工具，發(fā)現(xiàn)是這里的原因（tip：van-nav-bar_title是van-button的父節(jié)點(diǎn)）
.van-nav-bar__title {
max-width: 60%;
margin: 0 auto;
color: #323233;
font-weight: 500;
font-size: 0.42667rem;
}對(duì)此，應(yīng)進(jìn)行如下更改
.van-nav-bar__title {
max-width: unset; // 取消設(shè)置
}然后我刷新沒(méi)有改變，打開開發(fā)者工具發(fā)現(xiàn)樣式?jīng)]有改變
到此，我就到網(wǎng)上進(jìn)行查詢，大部分說(shuō)的都是vant下載引用的問(wèn)題，在這里我說(shuō)下大概總的情況
我本人采用方法三解決的，如果覺得自己安裝下載都沒(méi)有問(wèn)題的話，可直接跳到方法三查看
方法一：（下載安裝問(wèn)題）
1.在項(xiàng)目目錄下打開cmd，輸入
vue ui
2.會(huì)自動(dòng)打開圖形化界面，導(dǎo)入該項(xiàng)目
3.查看是否有下載Vant依賴
4.如果沒(méi)有，點(diǎn)擊右上角的搜索框進(jìn)行下載
方法二：（下載版本問(wèn)題）
# Vue 3 項(xiàng)目，安裝最新版 Vant： npm i vant -S # Vue 2 項(xiàng)目，安裝 Vant 2： npm i vant@latest-v2 -S
根據(jù)自身的Vue項(xiàng)目版本進(jìn)行選擇安裝
方法三：（引入問(wèn)題）
第一種 - 自動(dòng)按需引入組件
# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無(wú)需設(shè)置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接著你可以在代碼中直接引入 Vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';第二種 - 手動(dòng)按需引入組件
import Button from 'vant/lib/button'; import 'vant/lib/button/style';
第三種 - 導(dǎo)入所有組件
import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
方法四：（我自己是靠這個(gè)最后才生效的）
1.對(duì)于css語(yǔ)法
使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件
2.對(duì)于scss，less
使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名
在這里，我以less為例子（仍然是上面的代碼~）：
/deep/ .van-nav-bar__title {
max-width: unset;
}到這里后再去刷新頁(yè)面，就發(fā)現(xiàn)成功了！！
方法五：（這是我去查閱Vant文檔的時(shí)候看到的）
在 HTML 中無(wú)法正確渲染組件？
因?yàn)?HTML 并不支持自閉合的自定義元素，也就是說(shuō)單標(biāo)簽<van-cell />，這樣的語(yǔ)法是不被識(shí)別的，使用完整的閉合標(biāo)簽可以避免這個(gè)問(wèn)題。
在單文件組件、字符串模板和 JSX 中可以使用自閉合的自定義元素<van-cell><van-cell />，就不會(huì)出現(xiàn)這個(gè)問(wèn)題。
總結(jié)
到此這篇關(guān)于vant樣式不生效問(wèn)題的解決辦法的文章就介紹到這了,更多相關(guān)vant樣式不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue和Firebase實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天應(yīng)用
在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來(lái)構(gòu)建一個(gè)實(shí)時(shí)聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實(shí)時(shí)數(shù)據(jù)庫(kù)和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個(gè)功能強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue雙向綁定實(shí)現(xiàn)原理與方法,結(jié)合實(shí)例形式詳細(xì)分析了發(fā)布者-訂閱者模式、臟值檢查、數(shù)據(jù)劫持與雙向綁定相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-05-05
詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問(wèn)
這篇文章主要介紹了詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問(wèn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
快速修改antd?vue單個(gè)組件的默認(rèn)樣式
這篇文章主要介紹了快速修改antd?vue單個(gè)組件的默認(rèn)樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-08-08
idea編譯器vue縮進(jìn)報(bào)錯(cuò)問(wèn)題場(chǎng)景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò)，怎么解決呢，很多朋友遇到這個(gè)問(wèn)題都很棘手，不知該如何解決，今天小編給大家通過(guò)場(chǎng)景分析介紹解決方案，需要的朋友參考下吧2021-07-07
在本篇文章里小編給大家分享了關(guān)于vue文件運(yùn)行的方法教學(xué)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
一文帶你搞懂Vue.js如何實(shí)現(xiàn)全選反選功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)全選反選功能的相關(guān)知識(shí),文中是示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-01-01
Vue3+Vite如何解決“找不到模塊“@/components/xxx.vue”或其相應(yīng)的類型聲明ts(2307)”
在Vue項(xiàng)目中使用Vite時(shí),可能因版本差異而需修改tsconfig.app.json而非tsconfig.json以解決編譯錯(cuò)誤,本文分享個(gè)人解決經(jīng)驗(yàn),供參考2024-10-10