Bei der Entwicklung von Vue müssen wir auf Unterkomponenten verweisen, einschließlich UI-Komponenten (Element, iview). Nach dem Hinzufügen eines Bereichs zur übergeordneten Komponente hat das Schreiben des Stils der untergeordneten Komponente in die übergeordnete Komponente jedoch keine Auswirkung. Nach dem Entfernen des Gültigkeitsbereichs können Stile überschrieben werden. Dies wird jedoch den globalen Stil verschmutzen. Um dieses Problem zu lösen, fügt Vue-Loader eine neue Schreibmethode hinzu.

#demo

Übergeordnete Komponente:

<style lang="css" scoped>

 header /deep/ .header{     
   box-shadow:0px 1px 0px 0px $white;
  }

header >>> .header{   
   box-shadow:0px 1px 0px 0px $white;
}

</style>

Untergeordnete Komponente:

<template>  
 <header>    
    <p class="header">       
    </p>   
  </header>
</template>

Diese Art des Schreibens und Änderns des Stils der Unterkomponente verunreinigt nicht den globalen Stil!

Offizielle Website-Dokumentation: Scoped CSS · vue-loader

Tipps: Diese Methode wird ab Vue-Loader 11.2.0 unterstützt

• Geltungsbereich entfernen

• 2. Lokale und globale Stile mischen

• 3. Tiefe nutzen Effektauswahl

Bei der Entwicklung mit Vue verweisen wir manchmal auf externe Komponenten, einschließlich UI-Komponenten (ElementUI, iview).

Wenn das <style>-Tag das scoped-Attribut hat, gilt sein CSS nur für Elemente in der aktuellen Komponente.
Aber nach dem Hinzufügen von scoped in der übergeordneten Komponente dringt der Stil der übergeordneten Komponente nicht in die untergeordnete Komponente ein, sodass das Schreiben des Stils der untergeordneten Komponente in die übergeordnete Komponente keine Auswirkungen hat.

一、去掉 scoped

在父组件的 <style> 中去掉 scoped 后，父组件中可以书写子组件的样式，但是你会担心这样会污染全局样式。 
【因为我们知道正确使用全局样式的姿势是使用一个全局的 app.css】

二、混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style>
/* 全局样式 */
</style>