vue modify the style swiper

problem

　　vue single-file assembly can not be modified swiper style.

solve

　　1, single-file components: a new style without scoped it eventually became a global style. Only swiper style in which to operate.

<lang style = "SCSS"> 
  .swiper-Container { 
    .swiper the pagination {- 
      .swiper the pagination-bullet-{ 
        width : 14px ; 
        height : 14px ; 
      } 
    } 
  } 
</ style> 
// item used multiple times, then it swiper to add specific className swiper-container as distinguished.

<div class="swiper-container index-swiper"><div>
<style>
    .index-wiper{}
</style>

　2, new specific, in the introduction to css main.js operation swiper style, using! import guarantee style weights higher than the pre-swiper.

cause

　　1, single-file template, and style will be compiled after vue-loader. Used in the style attribute scoped tag words, between the template elements and handwriting style vue-loader will be generated by a custom attribute, echoing relationship, only the style template corresponding function. Generated by the compilation process swiper tab tag vue-loader is not compiled, so not chosen.

// vue-loader generated data-v-2967ba60

footer-bar[data-v-2967ba60]

<div class="footer-bar" data-v-2967ba60>

　　2, do not use scoped global style is modified, or if not, then in covering global style selectors described weight swiper no predefined high.