sass、lessのscopedプロパティ

1、scopedの実現原理
Vue,Lessにおけるscoped属性の効果は主にPostCssによって実現される.コードの例:

//   



//   

.example[data-v-5558831a] {
  color: red;
}

PostCSSは、1つのコンポーネントのすべてのdomにユニークなダイナミックプロパティ(例えば、上のdata-v-558831 a)を追加し、cssセレクタに対応するプロパティセレクタを追加してコンポーネントのdomを選択します.これにより、スタイルがそのプロパティを含むdom要素(コンポーネント内部のdom)にのみ作用します.
要約すると、scopedのレンダリングルールは次のとおりです.

HTMLのdomノードに重複しないdata属性(例えば、data-v-558831 a)を追加して、このdom要素

を一意に識別する.

各文のcssセレクタの最後(コンパイル後に生成されたcss文)に現在のコンポーネントのdata属性セレクタ(例えば[data-v-558831 a])を追加してスタイル

をプライベート化する.
 
2、scoped貫通
scoped Vueプロジェクトでは、サードパーティ製コンポーネントライブラリを導入する場合、scopedプロパティを削除してコンポーネント間のスタイルを上書きしないで、ローカルコンポーネントでサードパーティ製コンポーネントライブラリのスタイルを変更する必要があります.この場合、scopedを特殊な方法で貫通することができます.
スタイルの透過には>>>を使用します.

   >>>      
          
        
.wrapper >>> .swiper-pagination-bullet-active
   background: #fff

sassとlessのスタイル貫通使用/deep/

   /deep/       {
     
}
.wrapper /deep/ .swiper-pagination-bullet-active{
   background: #fff;
}

以下を参照してください.https://segmentfault.com/a/1190000015932467
 
3、scoped使用中の問題
styleラベルにscopedプロパティを追加すると、styleラベルのスタイルは他のコンポーネントではなくコンポーネントにのみ作用しますが、他の共通スタイルはコンポーネントに作用します.たとえば、親コンポーネントにscopedプロパティが追加されている場合、親コンポーネントのスタイルは子コンポーネントには作用しません.
親コンポーネントにscopedプロパティがなく、子コンポーネントに存在する場合、親コンポーネントから子コンポーネントを開くと、親コンポーネントに設定されたスタイルが子コンポーネントに作用しますが、子コンポーネントページを直接ジャンプして開くと、親コンポーネントのスタイルが子コンポーネントに作用しません.コンポーネントでスタイルを設定するには、scopedプロパティをできるだけ追加する必要があります.