vue.js - 使用 SCSS 和 Vue 3 避免 v-deep 重复

Question

Vue 3 已弃用 v-deep作为组合器:https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
我们有使用 SCSS 和 v-deep 的现有代码像这样:

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

编译成这样的东西:

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

在 Vue 3 中，这种语法已被弃用，我们需要改为这样做:

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

我们必须重复 v-deep对于每个嵌套规则。实际上，还有更多，还有一些复杂的规则。
有没有办法，在SCSS 中构造一个嵌套块，其中所有内部规则都包装到这个 ::v-deep(...) 中。句法？

我正在寻找这样的东西(不是实际的语法):

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

除了自选择器( & )会具有相反的含义，引用子选择器而不是父选择器。

Answer 1

你可以用一个空的选择器参数做几乎同样的事情:

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