vue模块私有组件中(scoped)设置全局样式

项目开发过程中，我们经常会用到scoped来使样式文件只适用于当前模块，scoped设计的初衷就是让样式变得不可修改，可以很好的实现私有化

简单介绍一下scoped三条渲染规则

• dom：html的dom节点会有唯一的data属性（例如下方的data-v-5558831a）

• <div data-v-5558831a class="header">
      <div data-v-5558831a class="header-left"></div> 
      <div data-v-5558831a class="header-input">输入城市景点，游玩主题</div> 
      <div data-v-5558831a class="header-right">城市</div>
  </div>

   

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

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

• 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

• <div class="home">
      <home-header></home-header>
  </div>
  编译后：
  <div data-v-0c57a6db class="home">
      <div data-v-5558831a data-v-0c57a6db class="header">
          <div data-v-5558831a class="header-left"></div> 
          <div data-v-5558831a class="header-input">输入城市景点，游玩主题</div> 
          <div data-v-5558831a class="header-right">城市</div>
      </div>
  </div>
  注：由此便可得知父组件scoped内样式无法修改子组件元素样式的原理了
  

  样式穿透

  适用范围：

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

• 方法：

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

• <style lang="stylus" scoped>
    .wrapper >>> .swiper-pagination-bullet-active
        background: #fff !important
  </style>
  // 注：样式穿透是vue-loader的特性
  // 当lang = less or sass 时 解析不了">>>"符号，则使用 /deep/
  .a /deep/ .b {
  　　/*样式*/
  }