問題

vue單文件組件中無法修改swiper樣式。

解決

1，單文件組件中：新增一個style 不加scoped 讓它最終成為全局樣式。只在其中操作swiper的樣式。

.swiper-container{

.swiper-pagination{

.swiper-pagination-bullet{

width: 14px;

height: 14px;

}

}

}

// 項目中多次使用swiper 的話 就給swiper-container 添加特定className作為區(qū)分。

.index-wiper{}

,2，新建專用于操作swiper 樣式的css， 在main.js中引入， 使用！import保證比swiper 預設(shè)樣式權(quán)重高。

產(chǎn)生原因

1，單文件中的template，和style 都會經(jīng)過vue-loader的編譯。在style標簽上使用了 scoped 屬性的話，template中手寫的元素和style之間會通過vue-loader生成的一個自定義屬性，形成呼應關(guān)系，style只對對應的template起作用。編譯過程中由swiper 生成的分頁器標簽不會經(jīng)過vue-loader的編譯，所以選不到。

// vue-loader 生成的 data-v-2967ba60

footer-bar[data-v-2967ba60]

2，不使用scoped 修飾的都是全局樣式，如果在全局樣式中還是覆蓋不了的話說明選擇器權(quán)重沒有swiper中預定義的高。

總結(jié)

以上是生活随笔為你收集整理的vue 方法里面修改样式_vue中修改swiper样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。