Comment utiliser le sélecteur profond en scss dans Vue ?

Question

Comment utiliser le sélecteur profond en scss dans Vue ?

Le code ci-dessous ne fonctionne pas.

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

Un sélecteur profond comme >>> en css mais en scss à l'intérieur du composant mono-fichier de Vue.

Answer 1

Extrait de la documentation de Vue :

"Certains préprocesseurs, tels que Sass, peuvent ne pas être en mesure d'analyser >>> correctement. Dans ces cas, vous pouvez utiliser le combinateur /deep/ à la place - c'est un alias pour >>> et il fonctionne exactement de la même manière."

Alors, essayez ceci :

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

Answer 2

J'ai eu le même problème, et j'ai fini par le résoudre en utilisant ::v-deep comme indiqué ici :

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>