修改vant组件样式无法显示的问题

• .vue文件中的style标签内因为scoped的原因，样式只对.vue文件中的template模板标签内的结构有效，引入的第三方vant中的组件是无效的。
• 解决方案：
  定义一个全局的样式文件，例如在src目录中添加一个resetvant.less文件（这里我使用的是less文件，也可以是scss文件或者css文件），专门用来存放vant组件中需要修改的样式。为了便于维护最好使用组件原有的样式类名进行样式修改。最后在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>