使用scss/less修改vant UI样式的方法

在vue实际项目开发中，我们避免不了使用一些开源的UI组件库，style的样式中都会增加 scoped 标识只会在当前页面中去使用，这就涉及到了如何修改默认组件样式的问题了。

1.在使用scss的情况下，要使用::v-deep，/deep/是不支持的，会报错。

<style lang="scss" scoped>
  ::v-deep .van-button {
    background: red;
  }
  /* 会报错
    /deep/ .van-button {
      background: red;
    }
  */
</style>

2.在使用less的情况下，使用::v-deep或/deep/，改变默认样式。

<style lang="less" scoped>
  ::v-deep .van-button {
    background: red;
  }

  /deep/ .van-button {
    background: red;
  }
</style>

3.css样式处理的时候，使用 >>>

<style scoped>
  .class >>> .loading-warp {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  }
</style>

这样就基本大功告成了，快去试试体验体验吧，哈哈哈哈哈哈哈哈哈。