How to use deep selector in scss in vue

Question

How to use deep selector in scss in vue?

The code below not work.

<style lang="scss" scoped>
.a{
 &>>>.b{
  ...
 }
}
</style>

A deep selector like >>> in css but in scss inside vue single file component.

Answer 1

I had the same issue, and i eventually fix this using ::v-deep as stated here:

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

<style lang="scss" scoped>
.v-input {
  ::v-deep .v-text-field__details {
    min-height: 0;
    margin: 0;
    .v-messages {
      min-height: 0;
    }
  }
}
</style>