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 {
　　/*样式*/
}