设置swiper轮播图的css样式无效？

项目场景：

在做vue项目的时候，使用到了vue-awesome-swiper三方库，当时小编想重写/覆盖轮播图的分页器小圆点的css样式；

其次，小编做项目时，使用的css预编译器是SCSS；

问题描述：

当小编在重写分页器小圆点css样式时，发现怎么设置都无效；之后就去百度搜了搜，好多博客都说应该使用样式穿透，小编就试了试在项目中使用样式穿透来覆盖原来官方的css样式，还是不行~

 

当时小编重写css样式代码如下：

<style scoped lang="scss">
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: #fff;
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    background:red;
  }
</style>

---

原因分析：

注意点：如果想覆盖swiper的样式，那么style标签不能是 scoped 的，否则无法覆盖；

---

解决方案：

解决：把style标签中的scoped 关键字去掉即可~

PS：如果当前组件，style标签中确实需要写scoped，那么我们可以重新开启一个新的style标签，在这个新的style标签中进行重写swiper的css样式；

小编修改之后的代码：

<style lang="scss">
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: #fff;
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    background：red；
  }
</style>