vue中修改swiper樣式

問題

　　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中預定義的高。