vue 樣式穿透 尖括號3、/deep/ 、::v-deep 應用場景注意事項

官方文檔地址,更多關於Scoped CSS的內容

在很多vue的組件庫 , 如vant，elementUI， iview等都可能自定義一些樣式文件

項目中用到了 elementui，如果使用預處理器 scss, sass,less , 修改樣式可能修改不掉, 而且這種需求出現的頻率非常高。但如果去掉scoped話又會影響全局樣式。當然我們知道可以使用 樣式穿透的方式操作

那麼究竟什麼時候使用 >>> 什麼時候使用 /deep/ 和 ::v-deep 實際操作中會有什麼問題呢?

1、>>>

如果項目使用的是css 原生樣式,那麼你可以直接使用 >>> 穿透修改

<style scoped>
/*編譯前*/
.a >>> .b { 
 /* ... */
}

/*編譯後*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

2、/deep/

項目中用到了預處理器 scss 、sass、less 操作符 >>> 可能會因爲無法編譯而報錯 。可以使用 /deep/
注意：vue-cli3以上版本不可以

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }
</style>

3、::v-deep

如果使用了預處理器都可以使用 ::v-deep

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
/*用法2*/
.a ::v-deep .b {
  /* ... */
}
</style>