均為解決CSS全局作用域問題（樣式?jīng)_突（污染））的一個解決方案。

1.Scoped CSS

當(dāng)?<style>?標(biāo)簽有?scoped?屬性時，相當(dāng)于在元素中添加了一個唯一屬性用來區(qū)分。

<style scoped> .example {color: red; } </style><template><div class="example">hi</div> </template>

它通過使用 PostCSS 來實現(xiàn)以下轉(zhuǎn)換，轉(zhuǎn)換結(jié)果：

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

2.CSS Modules

通過給樣式名加hash字符串后綴的方式，實現(xiàn)特定作用域語境中的樣式編譯后的樣式在全局唯一。

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

使用module的結(jié)果編譯如下：

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

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

推薦使用CSS Modules

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

轉(zhuǎn)載于:https://www.cnblogs.com/vickylinj/p/9573395.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的[Vue]Scoped Css与Css Modules的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。