vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？

在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。

解决方法：

1.使用 `:global`，可以将样式应用于整个组件或应用程序。例如，要应用于整个组件：

<style scoped>
:global(.my-class) {
  color: red;
}
</style>

2.使用 CSS 变量，可以在组件中定义变量，并在样式中使用它们。例如：

<style scoped>
:root {
  --my-color: red;
}

.my-class {
  color: var(--my-color);
}
</style>

3.使用 `::v-deep` 的替代方案 `::slotted`，它能在父组件样式中选择子组件的内容。例如：

/* 子组件 */
<template>
  <div class="my-class">
    <slot></slot>
  </div>
</template>

/* 父组件 */
<template>
  <div>
    <slot>
      <p class="my-class">This paragraph will be styled</p>
    </slot>
  </div>
</template>

<style scoped>
::slotted(.my-class) {
  color: red;
}
</style>

以上是一些可行的解决方法，可以根据实际情况选择适合自己的方式。