由于您提到的原因，Sass显然不允许嵌套 Select 器参数列表:deep(或任何其他伪类)，但有几个解决方法.

解决方法1:拆分SASS样式

拆分样式，以使:deep的 Select 器列表不嵌套:

<!-- MyParent.vue -->
<style scoped lang="scss">
:deep(.wrapper) {
    display: flex;
}
:deep(.wrapper__element) {
    display: block;
}
</style>

demo 1个

解决方法2:拆分类名

拆分BEM类名称(从wrapper__element到__element)，这样就不需要父 Select 器:

<!-- MyComponent.vue -->
<template>
    <div class="wrapper">
        <div class="__element">...</div>
    </div>
</template>

或者在wrapper__element的基础上增加一个__element类(如果可以忽略重复的话):

<!-- MyComponent.vue -->
<template>
    <div class="wrapper">
        <div class="wrapper__element __element">...</div>
    </div>
</template>

出于某种原因，此场景需要基于 Select 符的:deepto(例如，下例中的root):

<!-- MyParent.vue -->
<template>
    <div class="root">
        <MyComponent />
    </div>
</template>

<style scoped lang="scss">
.root:deep(.wrapper) {
    display: flex;

    .__element {
        display: block;
    }
}
</style>

<!-- MyComponent.vue -->
<template>
  <div class="wrapper">
    <h1>.wrapper</h1>

    <!-- Add __element class here ???? (and optionally remove wrapper__element) -->
    <div class="wrapper__element __element">
      <h1>.wrapper__element</h1>
    </div>
  </div>
</template>

demo 2个