Question

我正在尝试在SCSS中使用子项/深度选择器。但是，输出css与预期的不一样。此问题类似于How do I use /deep/ or >>> in Vue.js? 但是，他们使用的是webpack和vue-loader，而不是包裹。

我尝试过：

.example >>> .example-child {
    font-size: 20px;
}

这会生成

.example > .example-child[data-v-bb9328] {
  font-size: 20px;
}

尽管我需要以下内容：

.example[data-v-bb9328] > .example-child {
  font-size: 20px;
}

Parcel文档非常准，我在github中找不到关于此的任何注释。这不是受支持的功能，还是我什么都没看到？

Answer 1

检查一下：

<template>
  <div>
    <div class="example">
      <div class="example-child">...</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TestExample',
  }
</script>
<style lang="scss" scoped>
  .example::v-deep {
    .example-child {
      border: 1px solid red;
    }
  }
</style>

它产生：

<style type="text/css">
.example[data-v-b07474d4] .example-child{
  border:1px solid red;
}
</style>

是否可以像使用vue-loader一样在包裹中使用深度/子CSS选择器？

1 个答案: