什麼是scoped?
在vue文件中的style標籤上,有一個特殊的屬性:scoped。當一個style標籤擁有scoped屬性時,它的CSS樣式就只能作用於當前的組件,也就是說,該樣式只能適用於當前組件元素。通過該屬性,可以使得組件之間的樣式不互相污染。如果一個項目中的所有style標籤全部加上了scoped,相當於實現了樣式的模塊化。
scoped的實現原理
vue中的scoped屬性的效果主要通過PostCSS轉譯實現,
如下是轉譯前的vue代碼:
<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>
即:PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性,然後,給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom,這種做法使得樣式只作用於含有該屬性的dom——組件內部DOM。
爲什麼需要穿透scoped?
scoped看起來很美,但是,在很多項目中,會出現這麼一種情況,即:引用了第三方組件,需要在組件中局部修改第三方組件的樣式,而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過特殊的方式,穿透scoped。
<style scoped>
外層 >>> 第三方組件 {
樣式
}
</style>
實際代碼比如(我這裏使用的是 elementui第三方組件庫的組件名):
<style scoped>
/* .footerContainer是父級容器 .el-table--border td 是elementui自己封裝的名字 */
.footerContainer >>> .el-table--border td {
border-right: none;
}
.footerContainer .screen_configuration_el-table th {
background-color: #eff2f7 !important;
border-left: none !important;
color: black !important;
}
.footerContainer >>> .el-table--border {
border: 1px solid #ebeef5;
border-left: none;
border-right: none;
}
</style>
通過 >>>
可以使得在使用scoped屬性的情況下,穿透scoped,修改其他組件的值。
還有一種方法就是引入外部 --> 全局 style css --> 曲線救國的方法
其實,還擁有一種曲線救國的方法,即在定義一個含有scoped屬性的style標籤之外,再定義一個不含有scoped屬性的style標籤,即在一個vue組件中定義一個全局的style標籤,一個含有作用域的style標籤:
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
此時,你只需要將修改第三方樣式的css寫在第一個style中即可。
注意的地方:
如果使用 >>> scoped穿透選擇器 就不能再style上面添加less sass scss 否則報錯。
如下圖: