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

问题描述

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 {...}
}

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

解决方法

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

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