vue 開發常用工具及配置八：scoped CSS 模組化

目錄    1、為什麼需要使用 scoped  2、scoped 穿透問題

1、為什麼需要使用 scoped ？

當一個style標籤擁有scoped屬性時，它的CSS樣式就只能作用於當前的組件。通過該屬性，可以使得組件之間的樣式不互相污染，相當於實現了樣式的模組化。

scoped模組化是通過PostCSS 插件實現的，實現原理是怎樣的？

如下所示，是編譯前的源碼：

<style scoped>  .example {   color: red;  }  </style>  <template>   <div class="example">hi</div>  </template>

編譯後為：

<style>  .example[data-v-5558831a] {   color: red;  }  </style>  <template>   <div class="example" data-v-5558831a>hi</div>  </template>

在CSS語法中，div[data-v-5558831a]表示匹配所有帶有data-v-5558831a屬性的div標籤。如下所示程式碼：

a[href] {color:red;}

只對有href屬性的a標籤應用樣式。

在編譯階段，PostCSS插件通過給html標籤添加data-v-5558831a屬性，並且同時給樣式類.example添加同名修飾符，自動實現了css模組化。

這便是 scoped 模組化的實現原理。

當在項目中引用了第三方組件，而第三方組件使用了scoped模組化。此時需要在己方組件中局部修改第三方組件的樣式，便涉及到了穿透問題。

由於第三方組件被自動添加了隨機的類data-v-5558831a屬性，此時消費方在外圍即使使用!important也是無濟於事的。

假設項目中使用element-ui的table組件，此時想在己方組件中修改table組件標題高度。通過檢視組件程式碼發現，其標題類名為.el-table__header-wrapper。使用穿透法解決問題應如下編碼：

<style lang="less" scoped>   .el-contain-row /deep/ .el-table__header-wrapper {      height: 20px;    }  </style>

在sass和less樣式中穿透使用/deep/。

又例，在vue項目中使用了vuetify框架，如下所示，如果想改變這個按鈕的文本顏色：

<v-btn small color="primary" id="button2">測試scoped穿透</v-btn>

外圍的穿透樣式可以寫：

#button2.v-btn /deep/ .v-btn__content{    color: @theme-color;  }

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200104

參考鏈接

基於 vue+go 如何快速進行業務迭代？