web-dev-qa-db-fra.com

Comment utiliser / deep / ou >>> dans Vue.js?

Donc, j'ai lu ici que dans Vue.js, vous pouvez utiliser /deep/ ou >>> dans un sélecteur afin de créer des règles de style qui s'appliquent aux éléments à l'intérieur des composants enfants. Cependant, essayer d'utiliser ceci dans mes styles, que ce soit en SCSS ou en simple vieux CSS, ne fonctionne pas. Au lieu de cela, ils sont envoyés au navigateur mot pour mot et n'ont donc aucun effet. Par exemple:

home.vue: 

<style lang="css" scoped>
    .autocomplete >>> .autocomplete-input
    {
    // ...
    }
</style>

CSS généré: 

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

ce que je veux: 

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

Ma configuration de webpack concernant vue-loader ressemble à ça:

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

Donc, ma question est, comment puis-je obtenir ce >>> opérateur pour travailler?

J'ai déjà trouvé this réponse, mais je fais exactement cela et cela ne fonctionne pas ...

cssnode.jswebpacksassvue.js
18
laptou

J'ai utilisé avec succès/deep/dans les feuilles de style SCSS étendues de Vue avec cette structure:

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

Edit:/deep/est déconseillé, si cela ne fonctionne plus pour vous, veuillez vous référer à l'autre réponse qui explique :: v-deep

17
arapl3y

La réponse acceptée ne fonctionnait pas pour moi dans SCSS de portée, mais cela a parfois:

.parent-class {
  &::v-deep .child-class {
    background-color: #000;
  }
}

Et cela faisait généralement (en omettant la classe parent):

::v-deep .child-class {
  background-color: #000;
}
25
Dan

Maintenant plus tôt /deep/ deviendra obsolète

Référence Vue Github - https://github.com/vuejs/vue-loader/issues/91

Toute portée component's css peut être modifié en utilisant deep selector

Utilisation ::v-deep dans ce cas, comme /deep/ deviendra obsolète.

Référence - Deep Selector

Inspectez simplement la classe du element rendu que vous souhaitez modifier en utilisant devtools dans chrome ou n'importe quelle console de navigateur).

Ensuite, si vous consommez component, modifiez-le

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>
9
Satyam Pathak