如何在vue中的scss中使用深度选择器

Question

如何在 vue 的 scss 中使用深度选择器？

下面的代码不起作用。

<style lang="scss" scoped>
.a{
 &>>>.b{
  ...
 }
}
</style>

一个类似于>>>incss但在scssvue 单文件组件中的深度选择器。

Answer 1

从 vue 文档：

“某些预处理器，例如 Sass，可能无法正确解析 >>>。在这些情况下，您可以使用 /deep/ 组合器代替 - 它是 >>> 的别名，并且工作方式完全相同。”

所以试试这个：

<style lang="scss" scoped>
.a {
 /deep/ .b {
  ...
 }
}
</style>

Answer 2

我遇到了同样的问题，我最终::v-deep按照此处的说明解决了这个问题：

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

<style lang="scss" scoped>
.v-input {
  ::v-deep .v-text-field__details {
    min-height: 0;
    margin: 0;
    .v-messages {
      min-height: 0;
    }
  }
}
</style>