[Vue]Scoped Css與Css Modules的區別

標籤：作用   guid   詳細   lan   gui   字串   temp   pre   stc   

均為解決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的區別