问题
vue 单文件组件中无法修改 swiper 样式.
解决
1, 单文件组件中: 新增一个 style 不加 scoped 让它最终成为全局样式. 只在其中操作 swiper 的样式.
- <style lang="sCSS">
- .swiper-container{
- .swiper-pagination{
- .swiper-pagination-bullet{
- width: 14px;
- height: 14px;
- }
- }
- }
- </style>
- // 项目中多次使用 swiper 的话 就给 swiper-container 添加特定 className 作为区分.
- <div class="swiper-container index-swiper"><div>
- <style>
- .index-wiper{}
- </style>
,2, 新建专用于操作 swiper 样式的 CSS, 在 main.JS 中引入, 使用! import 保证比 swiper 预设样式权重高.
产生原因
1, 单文件中的 template, 和 style 都会经过 vue-loader 的编译. 在 style 标签上使用了 scoped 属性的话, template 中手写的元素和 style 之间会通过 vue-loader 生成的一个自定义属性, 形成呼应关系, style 只对对应的 template 起作用. 编译过程中由 swiper 生成的分页器标签不会经过 vue-loader 的编译, 所以选不到.
- // vue-loader 生成的 data-v-2967ba60
- footer-bar[data-v-2967ba60]
- <div class="footer-bar" data-v-2967ba60>
2, 不使用 scoped 修饰的都是全局样式, 如果在全局样式中还是覆盖不了的话说明选择器权重没有 swiper 中预定义的高.
来源: http://www.bubuko.com/infodetail-3102075.html