Question

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

下面的代码不起作用。

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

像>>>中的css那样的深层选择器，但是在vue单个文件组件中的scss中。

Answer 1

我遇到了同样的问题，最终我使用::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>

Answer 2

来自vue文档：

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

所以尝试一下：

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

如何在Vue中的CSS中使用深度选择器

2 个答案: