css 的作用域表現。css modules
是乙個css檔案，其中所有類名和動畫名稱預設為區域性作用域。
使用js編譯原生的css檔案，使其具備模組化的能力，該檔案需要import使用。
在vue檔案中的style標籤上，有乙個特殊的屬性：scoped。
此樣式僅適用於當前元件元素，從而使元件之間的樣式不互相汙染。
實現原理
通過給樣式名加hash字串字尾的方式，實現特定作用域語境中的樣式編譯後的樣式在全域性唯一。
具體效果demo
// webpack.config.js
編譯前 - vue 環境
demo demo
編譯後 - vue 環境
demo demo
.green_3ui7s9iz
$style.green 是個變數，即可在js中引用，引用方式為：this.$style.green。
modules 即為啟用，localidentname 是設定生成樣式的命名規則。
應用場景
只應用於某個元件，其他元件不適用。
⚠️注意點
css modules生效方式：
css modules如何解決權重問題？
允許通過重新命名或命名空間來封裝樣式規則，減少對選擇器的約束，從而達到不需要特定方法就可舒服的使用類名。
當樣式規則耦合到每個元件時，當不再使用元件時，樣式也會被移除。
scoped
實現原理
vue通過在dom結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私有化模組化的目的。
具體效果demo
// 編譯前 demo.vue
hello world!
// 編譯後-dom
hello world!
// 編譯後-css
.demo-c[data-v-48baf84c]
⚠️注意點
「權重加重」的意思： 如果我們要去修改這個樣式，需要更高的權重去覆蓋其樣式。scoped會使標籤選擇器渲染變慢更多倍。
若使用者再定義了相同的類名，也有可能會影響到元件的樣式。
具有scoped屬性的樣式只會應用到當前元素和其子元素。inline樣式仍然比scoped樣式優先順序高，所以，最好避免使用inline樣式。
目的實現同一目的，比較它們的優缺點，css modules 配置並不麻煩且實現的整體效果更優於scoped css，在此個人更推薦使用css modules。
參考資料
CSS modules 與 React中實踐
最近一直在學習react,看上去蠻簡單的內容，其實學習曲線還是比較高的。目前學到css繫結的問題，看到有一篇好的文章，就轉過來了。css 模組化的解決方案有很多，但主要有兩類。一類是徹底拋棄 css，使用 js 或 json 來寫樣式。radium，jsxstyle react style 屬於這一...
在React中使用CSS Modules設定樣式
最近，一直在看react。那真的是乙個一直在學的過程啊，從配置環境webpack，到基礎知識jsx，babel，es6，沒有乙個不是之前沒有接觸的。其實，我內心是興奮的啊，畢竟，活著就是要接觸一些新的東西啊，那樣才有意思啊。反正多學點，肯定是沒錯的。哈哈。進入正題啦 我一看到css modules這...
css modules的一些實踐
本人使用vue引入css modules做實踐。vue文件檢視 以及 簡單的配置css loader 然後上新增module屬性，就自動生成乙個 style的計算屬性可以用了 template p class style.red span class style.redbg this should ...