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

Question

不推荐使用 Vue 3v-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 {...}
}