樣式效果如下所示（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è)置
 }

然后我刷新沒有改變，打開開發(fā)者工具發(fā)現(xiàn)樣式?jīng)]有改變

到此，我就到網(wǎng)上進(jìn)行查詢，大部分說的都是vant下載引用的問題，在這里我說下大概總的情況

我本人采用方法三解決的，如果覺得自己安裝下載都沒有問題的話，可直接跳到方法三查看

方法一：（下載安裝問題）

1.在項(xiàng)目目錄下打開cmd，輸入

vue ui

2.會(huì)自動(dòng)打開圖形化界面，導(dǎo)入該項(xiàng)目

3.查看是否有下載Vant依賴

4.如果沒有，點(diǎn)擊右上角的搜索框進(jì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)行選擇安裝

方法三：（引入問題）

第一種 - 自動(dòng)按需引入組件

# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(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語法

使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件

2.對(duì)于scss，less

使用 /deep/ 操作符取而代之——這是一個(gè) >>> 的別名

在這里，我以less為例子（仍然是上面的代碼~）：

/deep/ .van-nav-bar__title {
      max-width: unset;
}

到這里后再去刷新頁面，就發(fā)現(xiàn)成功了??！

方法五：（這是我去查閱Vant文檔的時(shí)候看到的）

在 HTML 中無法正確渲染組件？

        因?yàn)?HTML 并不支持自閉合的自定義元素，也就是說單標(biāo)簽<van-cell />，這樣的語法是不被識(shí)別的，使用完整的閉合標(biāo)簽可以避免這個(gè)問題。

        在單文件組件、字符串模板和 JSX 中可以使用自閉合的自定義元素<van-cell><van-cell />，就不會(huì)出現(xiàn)這個(gè)問題。

總結(jié)

到此這篇關(guān)于vant樣式不生效問題的解決辦法的文章就介紹到這了,更多相關(guān)vant樣式不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論