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

Posted 2023-02-16

【中文标题】如何在 Vue2 中的 Sass 后缀 (&__) 选择器上实现 ::v-deep？

【英文标题】：How to implement ::v-deep on Sass suffixes (&__) selector in Vue2?

【发布时间】：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;
    

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

谢谢！

【参考方案1】：

答案：

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

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