scss/less修改vant/element ui的默认样式方法

在Vue的项目中，style的样式都会增加 scoped 标识当前样式只影响当前页面组件，通常也会使用像Element UI和 Vant UI组件库，这就涉及到了如何修改默认组件样式的问题了。

1.在不使用css预处理器的情况，使用 >>> ，改变默认组件样式（以Vant UI为例子）

<style scoped>
  .class >>> .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.在使用scss的情况下，要使用::v-deep，/deep/反而会报错（可能是不支持？）。

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

附录：顺带一提，scss和less预处理器是可以使用css变量的，scss使用的是$变量名，less使用的是@变量名。

<style lang="less" scoped>
  ::v-deep .van-button {
    background: @theme-color;
  }
</style>

<style lang="scss" scoped>
  ::v-deep .van-button {
    background: $theme-color;
  }
</style>