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

laptou 2017-12-30 07:41.

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 cela dans mes styles, que ce soit en SCSS ou en vieux CSS, ne fonctionne pas. Au lieu de cela, ils sont envoyés textuellement au navigateur 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 Webpack relative à vue-loaderressemble à ceci:

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

Ma question est donc la suivante: comment faire fonctionner cet >>>opérateur?

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

css node.js webpack sass vue.js

5 answers

130

Dan 2019-03-27 09:34.

Utilisation ::v-deep

La réponse acceptée ne fonctionnait pas pour moi dans scopedSASS / SCSS, mais ::v-deep:

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

Si vous n'utilisez pas SASS / SCSS, utilisez la >>>syntaxe:

>>> .child-class {
    background-color: #000;
}

Avec ::v-deepou >>>, la <style>balise de ce composant doit être scoped:

<style scoped>

EDIT (10/1/2019): Infos supplémentaires :

La /deep/syntaxe est obsolète
sasset dart-sassne supportent pas /deep/, ne node-sassfait
Vuetify 2 ne prend pas en charge /deep/(car il ne prend pas en charge node-sass)

Satyam Pathak 2019-06-21 14:04.

Évitez d'utiliser /deep/et utilisez à la place::v-deep

Tout component'scss à portée peut être modifié à l'aide de deep selector mais plus tôt /deep/sera obsolète

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

Utilisez ::v-deep dans ce cas et évitez les obsolètes/deep/

Référence - Deep Selector

Inspectez simplement la classe du rendu elementque vous souhaitez modifier à l'aide devtoolsde Chrome ou de n'importe quelle console de navigateur.

Puis, en vous consommant component, modifiez-le

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

arapl3y 2018-09-18 10:43.

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

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

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

Kristiyan Tsvetanov 2020-03-22 23:54.

Pour moi, la seule chose qui a fonctionné était

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

Brian Scramlin 2020-07-30 01:43.

Bien qu'il ne soit pas trouvé dans la documentation , la réponse est que le composant que vous essayez d'atteindre ne peut pas être le composant racine. Enveloppez votre composant unique dans un <div>et il devrait fonctionner en utilisant une ::v-deepportée scsscomme d'autres l'ont expliqué.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Jana Duggar a été ouverte sur sa recherche de l'amour. Voici tout ce qu'elle a dit sur le sujet et sa fenêtre de mariage de cinq ans.

2023-06-12.

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La star d'Outlander, Sam Heughan, a récemment révélé ce qu'il retirera du tournage pour se souvenir de Jamie Fraser, le rôle qui a fait de lui une star.

2023-06-12.

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

"She Loves You" a été écrite en une heure, enregistrée en une journée, et a été la chanson des Beatles avec l'une de leurs meilleures performances de leur carrière.

2023-06-11.

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Dolly Parton et sa grand-mère Bessie avaient une relation spéciale. Grand-mère Parton était très malade, mais cela n'a pas empêché Dolly de lui faire des farces.

2023-06-11.

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

L'océan regorge de beauté, mais il abrite aussi certaines des créatures marines les plus terrifiantes de la planète. Nombre de ces animaux vivent dans les profondeurs obscures et sous haute pression des abysses.

2025-10-29.

Les 10 meilleurs enchantements d'épée dans Minecraft

Que vous affrontiez des créatures hostiles ou vous prépariez pour des affrontements PvP, connaître les meilleurs enchantements d'épée dans Minecraft peut vous donner un avantage considérable. Enchanter vos épées vous permet d'infliger plus de dégâts, d'augmenter le butin des créatures et d'accroître leur durabilité.

2025-10-29.

13 pays socialistes qui sont très différents les uns des autres

Quand on parle de pays socialistes, on imagine souvent un contrôle total de l'État et l'absence de propriété privée. Mais en réalité, les économies socialistes sont très diverses.

2025-10-29.

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

« Enfants » laisse tomber un caméo de grand nom et des nouvelles dévastatrices

2024-07-03 19:12.

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Des images de drones ont montré des pompiers semblant lutter pour éteindre l'incendie.

2024-07-03 19:04.

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

Eyes of Wakanda est directement lié au MCU, ainsi que des mises à jour sur X-Men '97, What If..., Daredevil, et plus encore.

2024-07-03 19:03.

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Ava Gardner a été mariée à Mickey Rooney et Frank Sintra, et a fréquenté plusieurs autres stars d'Hollywood. Voici un aperçu de l'histoire amoureuse d'Ava Gardner.

2024-06-23.

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

En 2022, avec la sortie de GPT-3, la compétence en écriture semble devenir moins importante. Avec l'IA, les personnes ayant une mauvaise écriture peuvent également générer du personnel de qualité.

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Dans le monde rapide et compétitif d'aujourd'hui, la carrière d'une personne joue un rôle important dans la croissance personnelle, la stabilité financière et la satisfaction globale de la vie. Cependant, de nombreuses personnes se retrouvent prises dans un cycle incessant de stagnation et d'insatisfaction, dépérissant progressivement dans leur vie professionnelle.

Qu'est-ce qui rend un podcast influent ?

La semaine dernière, j'ai remarqué un communiqué de presse, envoyé via PressGazette (un site Web d'information britannique). L'article annonçait qu'Acast, la société d'hébergement et de publicité de podcasts de Scandi, dirigerait un consortium d'éditeurs "probablement les plus influents" du podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

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

5 answers

Related questions

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Quel est le bois le plus dur au monde ?

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

Les 10 meilleurs enchantements d'épée dans Minecraft

13 pays socialistes qui sont très différents les uns des autres

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

À 9 800 $, voudriez-vous les emballer dans ce Toyota RAV4 2008 à sept places ?

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Qui est la femme de John Cleese ? Tout sur Jennifer Wade

Qui est la femme de Craig Melvin ? Tout sur la journaliste sportive Lindsay Czarniak

Chronologie de la relation entre Maggie Gyllenhaal et Peter Sarsgaard

les pronoms font super peur

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

Qu'est-ce qui rend un podcast influent ?

Language