vueモジュールプライベートコンポーネント(scoped)グローバルスタイルの設定

プロジェクト開発の過程で、私たちはよくscopedを使ってスタイルファイルを現在のモジュールにのみ適用します.scoped設計の初心はスタイルを修正できないようにし、私有化をうまく実現することです.
scopedの3つのレンダリングルールについて簡単に説明します

dom:htmlのdomノードには、一意のdata属性(例えば、下のdata-v-558831 a)

があります.

    
 
    
      ，    
 
    
  

• css：编译后的css选择器末尾会加一个当前组件的data属性来私有化样式

.header .header-left[data-v-5558831a] {
    width: 0.64rem;
    float: left;
}

コンポーネント内部に他のコンポーネントが含まれている場合、他のコンポーネントの最外層ラベルに現在のコンポーネントのdata属性

を付けるだけです.

    

   ：

    

        
 
        
      ，    
 
        
  
    

 ：         scoped                  

样式穿透

适用范围：

• 父组件添加scoped之后，解决在父组件中无法修改子组件样式问题
• 对公共组件的样式实现微调
• 对设置了scoped的子组件里的元素进行控制

方法：

• 在scoped样式中设置样式穿透，使之不受scoped的限制

//  ：     vue-loader   
//  lang = less or sass       ">>>"  ，    /deep/
.a /deep/ .b {
　　/*  */
}