解决使用vant库 样式修改不了问题

在修改vant默认样式时发现用！important都没有效果，原因：

由于vue开发时会在style加上scoped避免全局污染，所以正常开发时直接修改外部组件（vant）的样式时会不生效，我们把scoped删除后会发现样式是可以生效的。但是scoped是肯定不能不要的。

创建一个单独修改vant样式的页面，在里面修改你需要修改的vant默认样式

所以我们可以用 /deep/（深度）来修改样式 

/deep/.van-tab--active {
    color: $main-color !important;
    font-weight: 550;
  }
 
  /deep/.van-tabs__line {
  width: 132px !important;
  background-color: $main-color !important;
}
/deep/.van-tabs--line .van-tabs__wrap {
  height: 50px;
  border-bottom: 1px solid #ebeef5 !important;
}

现在这种方法虽然还可以用,也能生效，但是页面上会有报错

改成这种就可以了：

:deep(.van-tab--active) {
    color: $main-color !important;
    font-weight: 550;
  }