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.
Add a comment
|
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>
Comments
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>
2 Comments
4uroraskye
This will change/has changed, depending on your implementation of SCSS. If you're using
dart-sass then this will not work. You need to use ::v-deep instead GH comment. If you're using node-sass then you'll be ok to continue using /deep/ until they catch up and remove support for it too.
Douglas Gaskell
Yeah, this just results in a SassError that it was expecting a selection instead of a
/ at the start of /deep/