sass、less中的scoped屬性

1、scoped 的實現原理

Vue中的Less 中的 scoped 屬性的效果主要是通過 PostCss 實現的。代碼示例：

//編譯前
<template>
    <div class="example">scoped測試案例</div>
</template>
<style scoped lang="less">
 .example{
     color:red;
 }
</style>

//編譯后
<template>
    <div class="example" data-v-5558831a>scoped測試案例</div>
</template>
.example[data-v-5558831a] {
  color: red;
}

PostCSS 給一個組件中的所有 dom 添加了一個獨一無二的動態屬性（比如上面的data-v-5558831a），給 css 選擇器額外添加一個對應的屬性選擇器來選擇組件中的 dom ，這種做法使得樣式只作用於含有該屬性的dom元素(組件內部的dom)。

可以總結，scoped 的渲染規則：

1. 給HTML的dom節點添加一個不重復的data屬性(例如: data-v-5558831a)來唯一標識這個dom 元素
2. 在每句css選擇器的末尾(編譯后生成的css語句)加一個當前組件的data屬性選擇器(例如：[data-v-5558831a])來私有化樣式

 

2、scoped穿透

scoped在Vue項目中，當我們引入第三方組件庫時，需要在局部組件中修改第三方組件庫的樣式，而又不想去除scoped屬性造成組件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped。

stylus的樣式穿透 使用>>>來進行穿透

外層 >>> 第三方組件
        樣式
        
.wrapper >>> .swiper-pagination-bullet-active
   background: #fff

sass 和 less 的樣式穿透使用 /deep/

外層 /deep/ 第三方組件 {
   樣式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
   background: #fff;
}

可以參考：https://segmentfault.com/a/1190000015932467

 

3、scoped使用中的問題

在 style 標簽里添加 scoped 屬性代表着 style 標簽里的樣式只會作用於該組件而不會作用於其他組件中，但其他公共樣式仍會對該組件起作用。比如父子組件中，在父組件中添加了 scoped 屬性，此時父組件中的樣式並不會作用於子組件。

有個現象比較奇怪，在父組件中沒有 scoped 屬性，子組件中有，此時如果從父組件中打開子組件，父組件中設置的樣式會對子組件起作用，但是如果直接跳轉打開子組件頁面的話，此時父組件中的樣式就不會對子組件起作用了。所以我們在組件中設置樣式應該盡量都添加 scoped 屬性。