[Vue]Scoped Css與Css Modules的區別
阿新 • • 發佈:2018-09-02
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的區別