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

From the vue docs:

"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same."

So try this:

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

Answer 2

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>