Vue项目中less实现样式穿透

今天在看一个慕课网上的视频时，遇到了一个小问题，问题是在我们使用轮播图插件vue-awesome-swiper时，发现轮播图分页器pagination的当前页的小圆点显示为蓝色，但是设计稿中显示为白色，效果如图

因为在当前组件中的样式，我们使用了scoped属性锁定了样式作用域，所以我们要想修改这个样式就需要一些特殊设置，在视频中使用是stylus，所以它使用的是stylus的样式穿透

stylus样式穿透 >>>

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

但是我因为stylus找不到合适的版本，我在自己的项目中使用了less对CSS样式进行预处理，为了实现这一效果我去查阅了官网，并没有发现解决方式，最后在学习群中，群友给了解答方式，下面是less的样式穿透

less样式穿透 使用 /deep/

//结构，.wrapper 是最外层的，不一定是要最外层，和类选择器一样，.swiper-pagination-bullet-active，想改的类
 
 .wrapper /deep/ .swiper-pagination-bullet-active{
     background-color: #fff;
 }

修改后的效果如下图

最后把这个组件的代码附上

<template>
<!-- 如果我们不给轮播图的最外层加一个，并给其设置对应的样式的话
    在Fast 3G网络下，我们的轮播图下面的内容在加载时会出现跳动
 -->
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption">
            <swiper-slide>
                <img class="swiper-img" src="/piao/fusion/1505/27/">
             </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="/piao/fusion/1505/81/">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 左右箭头 -->
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
            <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
        </swiper>
    </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  // 单文件组件中的data必须是一个函数，下面是es6的写法
  data () {
    return {
    //   如果我们想要轮播图上的原点，我们就要添加pagination配置项  把显示圆点的div类名传进来
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper /deep/ .swiper-pagination-bullet-active{
    background-color: #fff;
}
.wrapper{
    overflow: hidden;
    // 下面三句相当于width:20.84vw
    width: 100%;
    height: 0;
    // 这个20.84%是相对于width 也是相对于视口
    background-color: #ececec;
    padding-bottom: 20.84%;
    .swiper-img{
        width: 100%;
    }
}

</style>