style加上scoped後，如何加自定義樣式(樣式穿透)

1.什麼是scoped

   在Vue文件中的style標籤上有一個特殊的屬性，scoped。當一個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的Vue組件，可以使組件的樣式不相互污染。如果一個項目的所有style標籤都加上了scoped屬性，相當於實現了樣式的模塊化

2.scoped的實際應用

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

 編譯以後：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

3.scoped穿透（樣式穿透）

  scoped看起來很好用，當時在Vue項目中，當我們引入第三方組件庫時(如使用vue-awesome-swiper實現移動端輪播)，需要在局部組件中修改第三方組件庫的樣式，而又不想去除scoped屬性造成組件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped。

 深度作用選擇器  （>>> ，/deep/）

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style lang="css" scoped>
.a >>> .b { /* ... */ }
</style>

上述代碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

  有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 操作符取而代之——這是一個 >>> 的別名，同樣可以正常工作。