vue中使用swiper 修改分页器更颜色失效问题

一般的更改分页器颜色使用：

<div class="swiper-pagination"></div>

<style lang="less" scoped>
.swiper-pagination-bullet-active{
      background-color: orangered;
    }
</style>

但是在vue中 因为scoped的缘故，为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。

此时会发现更改颜色并不成功：

我们可以通过删除scoped，就可以解决这个bug，但是这样做并不是很好

更好的办法是利用穿透器deep：

<div class="swiper-container">
<div class="swiper-pagination"></div>
</div>

.swiper-container ::v-deep .swiper-pagination-bullet-active{
      background-color: orangered;
    }

注：vue-cli3以下可以使用 /deep/