项目场景:
在做vue项目的时候,使用到了vue-awesome-swiper三方库,当时小编想重写/覆盖轮播图的分页器小圆点的css样式;
其次,小编做项目时,使用的css预编译器是SCSS;
问题描述:
当小编在重写分页器小圆点css样式时,发现怎么设置都无效;之后就去百度搜了搜,好多博客都说应该使用样式穿透,小编就试了试在项目中使用样式穿透来覆盖原来官方的css样式,还是不行~
![](https://img-blog.csdnimg.cn/img_convert/d1e37d29fbfa7162c867896ce4c22129.png)
当时小编重写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>