如何在 Vue2 中的 Sass 后缀 (&__) 选择器上实现 ::v-deep？答案

【问题标题】：How to implement ::v-deep on Sass suffixes (&__) selector in Vue2?如何在 Vue2 中的 Sass 后缀 (&__) 选择器上实现 ::v-deep？
【发布时间】：2022-01-08 02:47:09
【问题描述】：

我正在研究 Vue2 前端代码库的所有样式，为过渡到 Vue3 做准备。我在 Vue 文档上读到 ::v-deep 指令使子组件能够从其父组件接收范围样式。

我们使用 Sass。即使我在其父组件上实现了::v-deep，某些子组件类也没有应用样式。

样式部分的代码如下：

<style lang="scss" scoped>
  .support-category::v-deep {
    .icon-back {
      font-size: 14px;
      color: color(text4);
    }

    .border-bottom {
      border-bottom: 1px solid color(bg3);
    }

    &__subject {
      font-size: 18px;
      font-weight: 700;
    }

    &__accordion {
      font-size: 15px;

      ul,
      ol {
        margin-bottom: 0.75rem;
        margin-left: 14px;
        margin-top: 3px;
      }

      ul {
        list-style-type: disc;
      }

      ol {
        list-style-type: decimal;
      }
    }
  }
</style>

这是模板部分的代码部分：

<div v-if="hasSupportCategories">
          <div
            v-for="category in mainSupportCategory.support_categories"
            :key="category.id"
            class="mb-8"
          >
            <v-row>
              <v-col :size="12">
                <v-accordion
                  class="support-category__accordion"
                  :initial-active="mainSupportCategory.support_categories.length === 1"
                >
                  <template v-slot:title>
                    <div class="support-category__subject pb-3 border-bottom">
                      {{ category.title }}
                    </div>
                  </template>
                  <div
                    v-for="item in category.support_items"
                    :key="item.id"
                  >
                    <v-accordion class="support-category__accordion border-bottom py-3">
                      <template v-slot:title>
                        <div class="font-bold">
                          {{ item.title }}
                        </div>
                      </template>
                      <v-markdown
                        :source="item.text"
                        class="pt-3 pb-2"
                      />
                    </v-accordion>
                  </div>
                </v-accordion>
              </v-col>
            </v-row>
          </div>
        </div>

v-accordion 组件也实现了::v-deep：

<style lang="scss" scoped>
 .accordion::v-deep {
   .icon-left {
     margin-right: 0.75rem;
     font-size: 12px;
     color: color(text4);
   }
 }
</style>

<div class="accordion flex flex-col w-full">
        <div
          class="cursor-pointer"
          @click="toggle"
        >
          <slot name="title" />
        </div>
        <div v-show="active">
          <slot />
        </div>
</div>

我尝试了很多技术，但都没有成功：

&::v-deep(__subject) {
      font-size: 18px;
      font-weight: 700;
    }

或

&::v-deep(&__subject) {
      font-size: 18px;
      font-weight: 700;
    }

唯一可行的解决方案是让这个后缀选择器成为一个独立的子选择器。

.subject {
      font-size: 18px;
      font-weight: 700;
    }

这适用于这种情况，但由于我们在代码库中经常使用后缀，我想找到一个可靠的解决方案。

谢谢！

【问题讨论】：

标签： sass vuejs2 frontend

【解决方案1】：

答案：

使用 postcss.config.js 文件并添加一个 'postcss-prefix-selector' 像这样给每个类一个前缀。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-prefix-selector': {
      prefix: '#single-spa-application',
    },
  },
};

【讨论】：