How to use deep selector in scss in vue

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>

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>

Tags:

Vue.Js