Avoid v-deep duplication with SCSS and Vue 3

user_137627 0
Viewed 2101

Vue 3 deprecated using v-deep as a combinator: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

We have existing code using SCSS and v-deep like this:

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

Which compiles into something like this:

.class[data-xxxxxx] .child-class1 {...}
.class[data-xxxxxx] .child-class2 {...}

In Vue 3, this syntax is deprecated, and we need to do this instead:

.class {
  ::v-deep(.child-class1) {...}
  ::v-deep(.child-class2) {...}
}

We have to repeat v-deep for every nested rule. In reality, there are many more, and some complicated rules.

Is there any way, in SCSS to construct a nested block where all the inner rules are wrapped into this ::v-deep(...) syntax?

I'm looking for something like this (not actual syntax):

::v-deep(&) {
  .child-class1 {...}
  .child-class2 {...}
}

Except that the self-selector (&) would have kind of the opposite meaning, referencing the child selector instead of the parent.

vue-loader vue-sfc vuejs3 vue.js sass
1 Answers

You can do pretty much the same thing with an empty selector argument:

.class ::v-deep() {
  .child-class1 {...}
  .child-class2 {...}
}
user_21850930
Related