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.
How to use deep selector in scss in vue
Viewed 12740
2 Answers
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>
Related