Wie verwende ich / deep / oder >>> in Vue.js?

laptou 2017-12-30 07:41.

Daher habe ich hier gelesen , dass Sie in Vue.js /deep/oder >>>in einem Selektor Stilregeln erstellen können, die für Elemente in untergeordneten Komponenten gelten. Der Versuch, dies in meinen Stilen zu verwenden, sei es in SCSS oder in einfachem altem CSS, funktioniert jedoch nicht. Stattdessen werden sie wörtlich an den Browser gesendet und haben daher keine Auswirkung. Zum Beispiel:

home.vue:

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

generierte CSS:

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

was ich möchte:

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

Meine Webpack-Konfiguration vue-loadersieht folgendermaßen aus:

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

Meine Frage ist also, wie kann ich diesen >>>Operator zum Laufen bringen?

Ich habe diese Antwort bereits gefunden , aber ich mache genau das und es funktioniert nicht ...

css node.js webpack sass vue.js

5 answers

130

Dan 2019-03-27 09:34.

Verwenden ::v-deep

Die akzeptierte Antwort funktionierte in scopedSASS / SCSS nicht für mich , ::v-deeptat aber :

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

Wenn Sie SASS / SCSS nicht verwenden, verwenden Sie die folgende >>>Syntax:

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

Mit entweder ::v-deepoder >>>muss das <style>Tag für diese Komponente sein scoped:

<style scoped>

EDIT (01.10.2019): Zusätzliche Informationen :

Die /deep/Syntax ist veraltet
sassund dart-sassnicht unterstützen /deep/, nur node-sasstut
Vuetify 2 unterstützt nicht /deep/(da es nicht unterstützt node-sass)

Satyam Pathak 2019-06-21 14:04.

Vermeiden Sie es /deep/und verwenden Sie es stattdessen::v-deep

Jedes CSS mit Gültigkeitsbereich component'skann mithilfe von geändert werden, wird deep selector jedoch früher /deep/veraltet sein

Vue Github Referenz - https://github.com/vuejs/vue-loader/issues/913

Verwenden Sie ::v-deep in diesem Fall und vermeiden Sie veraltete/deep/

Referenz - Deep Selector

Überprüfen elementSie einfach die Klasse des gerenderten Objekts, das Sie devtoolsin Chrome oder einer anderen Browserkonsole ändern möchten .

componentÄndern Sie es dann beim Konsumieren

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

arapl3y 2018-09-18 10:43.

Ich habe / deep / erfolgreich in Vues SCSS-Stylesheets mit dieser Struktur verwendet:

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

Bearbeiten: / deep / wird veraltet. Wenn es bei Ihnen nicht mehr funktioniert, lesen Sie bitte die andere Antwort, die :: v-deep erklärt

Kristiyan Tsvetanov 2020-03-22 23:54.

Für mich war das einzige, was funktionierte

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

Brian Scramlin 2020-07-30 01:43.

Obwohl es nicht in der Dokumentation enthalten ist , lautet die Antwort, dass die Komponente, die Sie erreichen möchten, nicht die Stammkomponente sein kann. Wickeln Sie Ihre einzelne Komponente in ein <div>und es sollte mit arbeiten ::v-deepauf scoped scsswie andere erklärt haben.

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

MORE COOL STUFF

Jana Duggar: Alles, was sie über die Liebe gesagt hat und ihr 5-Jahres-Fenster, um den „Einen“ zu finden

Jana Duggar äußerte sich offen zu ihrer Suche nach Liebe. Hier ist alles, was sie zu diesem Thema und ihrem fünfjährigen Zeitfenster für die Ehe gesagt hat.

2023-06-12.

Sam Heughan weiß genau, was er vom „Outlander“-Set mitnehmen wird – „Ich fühle mich wie Jamie, wenn ich sie anziehe“

„Outlander“-Star Sam Heughan verriet kürzlich, was er vom Set mitnehmen wird, um an Jamie Fraser zu erinnern, die Rolle, die ihn zum Star gemacht hat.

2023-06-12.

Der frühe Beatles-Song, der laut einem Fab-Four-Insider einer der „aufregendsten Auftritte“ der Band war

„She Loves You“ wurde in einer Stunde geschrieben, an einem Tag aufgenommen und war der Song der Beatles mit einem ihrer besten Auftritte in ihrer Karriere.

2023-06-11.

Dolly Parton half ihrer „invaliden“ Großmutter, als keines der anderen Enkelkinder es tat – sie machte ihr auch Streiche

Dolly Parton und ihre Oma Bessie hatten eine besondere Beziehung. Oma Parton war sehr krank, aber das hielt Dolly nicht davon ab, ihr einen Streich zu spielen.

2023-06-11.

10 der furchterregendsten Meereskreaturen, die in den Tiefen des Ozeans lauern

Der Ozean ist voller Schönheit, birgt aber auch einige der furchterregendsten Meeresbewohner unseres Planeten. Viele dieser Tiere lauern tief unter der Meeresoberfläche, in der dunklen, von hohem Druck geprägten Tiefsee.

2025-10-29.

Die 10 besten Schwertverzauberungen in Minecraft

Wenn du gegen feindliche Monster kämpfst oder dich für PvP-Situationen ausrüstest, kann dir das Wissen um die besten Schwertverzauberungen in Minecraft einen entscheidenden Vorteil verschaffen. Durch das Verzaubern von Schwertern verursachst du mehr Schaden, erhältst mehr Beute von Monstern und verlängerst die Haltbarkeit deines Schwertes.

2025-10-29.

13 sozialistische Länder, die sich stark voneinander unterscheiden

Wenn von sozialistischen Ländern die Rede ist, stellt man sich oft die vollständige Kontrolle durch den Staat und das Fehlen von Privateigentum vor. In der Praxis unterscheiden sich sozialistische Wirtschaftssysteme jedoch stark.

2025-10-29.

The Bear-Zusammenfassung: Ist Marcus der netteste, sanfteste und aufrichtigste Mann in Chicago?

„Children“ hinterlässt einen Cameo-Auftritt eines großen Namens und einige verheerende Neuigkeiten

2024-07-03 19:12.

Würden Sie für 9.800 US-Dollar Ihren Wagen in diesen siebensitzigen Toyota RAV4 Baujahr 2008 packen?

Dieser RAV4 soll sich in ausgezeichnetem Zustand befinden und ist bereit für eine Partie Reise nach Jerusalem.

2024-07-03 19:04.

Marvels Black Panther Show wird die bisher bedeutendste Animationsserie

„Eyes of Wakanda“ ist direkt mit dem MCU verknüpft und bietet Updates zu „X-Men ’97“, „What If...“, „Daredevil“ und mehr.

2024-07-03 19:03.

Ava Gardners Dating-Geschichte: Ein Rückblick auf die Ehen und Romanzen der Hollywood-Ikone

Ava Gardner war mit Mickey Rooney und Frank Sintra verheiratet und datete mehrere andere Hollywoodstars. Hier ist ein Rückblick auf Ava Gardners Dating-Geschichte.

2024-06-23.

3 bewährte Möglichkeiten, Ihre Schreibfähigkeiten zu verbessern

Die Vorteile des Schreibens und Strategien, die Ihnen dabei helfen

Im Jahr 2022, mit der Veröffentlichung von GPT-3, scheinen Schreibfähigkeiten an Bedeutung zu verlieren. Mit KI können auch Menschen mit schlechten Schreibkenntnissen hochwertiges Personal hervorbringen.

Die langsame Erosion: Enthüllung der Art und Weise, wie Menschen in ihrer Karriere verkümmern

In der heutigen schnelllebigen und wettbewerbsintensiven Welt spielt die Karriere eine wichtige Rolle für das persönliche Wachstum, die finanzielle Stabilität und die allgemeine Lebenszufriedenheit. Viele Menschen befinden sich jedoch in einem unerbittlichen Kreislauf aus Stagnation und Unzufriedenheit, der ihr Berufsleben allmählich verkümmert.

Was macht einen Podcast einflussreich?

Letzte Woche fiel mir eine Pressemitteilung auf, die über PressGazette (eine britische Nachrichten-Website für Medien) verschickt wurde. In dem Artikel wurde angekündigt, dass Acast, das skandinavische Podcast-Hosting- und Werbeunternehmen, ein Konsortium der „wahrscheinlich einflussreichsten“ Verlage im Podcasting leiten werde.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Wie verwende ich / deep / oder >>> in Vue.js?

5 answers

Related questions

MORE COOL STUFF

Jana Duggar: Alles, was sie über die Liebe gesagt hat und ihr 5-Jahres-Fenster, um den „Einen“ zu finden

Sam Heughan weiß genau, was er vom „Outlander“-Set mitnehmen wird – „Ich fühle mich wie Jamie, wenn ich sie anziehe“

Der frühe Beatles-Song, der laut einem Fab-Four-Insider einer der „aufregendsten Auftritte“ der Band war

Dolly Parton half ihrer „invaliden“ Großmutter, als keines der anderen Enkelkinder es tat – sie machte ihr auch Streiche

Welches ist das härteste Holz der Welt?

10 der furchterregendsten Meereskreaturen, die in den Tiefen des Ozeans lauern

Die 10 besten Schwertverzauberungen in Minecraft

13 sozialistische Länder, die sich stark voneinander unterscheiden

The Bear-Zusammenfassung: Ist Marcus der netteste, sanfteste und aufrichtigste Mann in Chicago?

Würden Sie für 9.800 US-Dollar Ihren Wagen in diesen siebensitzigen Toyota RAV4 Baujahr 2008 packen?

Amazon-Lieferwagen brennt während der Sommerhitze in Houston in Flammen auf

Marvels Black Panther Show wird die bisher bedeutendste Animationsserie

Ava Gardners Dating-Geschichte: Ein Rückblick auf die Ehen und Romanzen der Hollywood-Ikone

Wer ist John Cleeses Frau? Alles über Jennifer Wade

Alles über Iman und David Bowies Tochter Alexandria „Lexi“ Jones

Wer ist Walker Scobell? Alles über den Percy Jackson and the Olympians Star

Pronomen sind super gruselig

3 bewährte Möglichkeiten, Ihre Schreibfähigkeiten zu verbessern

Die Vorteile des Schreibens und Strategien, die Ihnen dabei helfen

Die langsame Erosion: Enthüllung der Art und Weise, wie Menschen in ihrer Karriere verkümmern

Was macht einen Podcast einflussreich?

Language