• .vue文件中的style標(biāo)簽內(nèi)因為scoped的原因，樣式只對.vue文件中的template模板標(biāo)簽內(nèi)的結(jié)構(gòu)有效，引入的第三方vant中的組件是無效的。
• 解決方案：
  定義一個全局的樣式文件，例如在src目錄中添加一個resetvant.less文件（這里我使用的是less文件，也可以是scss文件或者css文件），專門用來存放vant組件中需要修改的樣式。為了便于維護(hù)最好使用組件原有的樣式類名進(jìn)行樣式修改。最后在main.js文件中全局引入就可以了。

//resetvant.less文件
.homeContainer {
    .van-swipe__track {
        height:200px;
        .van-swipe-item {
            &:nth-child(1){
            background-color: hotpink;
            }
            &:nth-child(2){
            background-color: pink;
            }
            &:nth-child(3){
            background-color: deeppink;
            }
            &:nth-child(4){
            background-color:palevioletred;
            }
        }
    }
}

//main.js文件
//解決vant樣式無法覆蓋的問題
import './css/resetvant.less'

//homeContainer.vue文件
<template>
    <div class="homeContainer">
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <h1>homeContainer</h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>

</style>