Vue3项目中修改swiper插件分页器的样式

最近在练习vue3+swiper11的项目，想改swiper插件的分页器样式，按照以前写html+css样式的想法写，但是却没有应用上。

<style scoped>
.swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 0;
}
</style>

以下是两种解决办法：

1、样式穿透（推荐！！！）

1.1 我用的是css写法

<style scoped>
.swiper >>> .swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 0;
}
</style>

运行结果如下：

f12也有显示了：

1.2 用的是sass和less的样式穿透写法

<style scoped css="less">
.swiper /deep/ .swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 0;
}
</style>

2、去掉scoped

可以去掉scoped，也可以新加一个来放swiper的样式。
但是注意有scoped是指只在这一个组件起作用，属于是局部的。如果去掉删掉scoped，就相当于全局的样式，可能会造成样式混乱，所以比较推荐第一点写法。

<style>
.swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 0;
}
</style>

这样写就会导致所有页面的轮播图都用一样的分页器样式了，不推荐。

当然，加个轮播图类名也是可以的，这样就可以区分一下当前页面和其他页面的轮播图样式了

<style>
.bottommySwiper .swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 0;
}
</style>