1. 程式人生 > >[Vue]Scoped Css與Css Modules的區別

[Vue]Scoped Css與Css Modules的區別

pan css 元素 直接 ade ref amp 後綴 uid

均為解決CSS全局作用域問題(樣式沖突(汙染))的一個解決方案。

1.Scoped CSS

<style> 標簽有 scoped 屬性時,相當於在元素中添加了一個唯一屬性用來區分

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

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

它通過使用 PostCSS 來實現以下轉換,轉換結果:

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

2.CSS Modules

通過給樣式名加hash字符串後綴的方式,實現特定作用域語境中的樣式編譯後的樣式在全局唯一。

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

使用module的結果編譯如下:

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

由此可見,css module直接替換了類名,排除了用戶設置類名影響組件樣式的可能性。

推薦使用CSS Modules

詳細見官方文檔:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局樣式

[Vue]Scoped Css與Css Modules的區別