關于CSS Modules

CSS Modules是一個css文件，包含所有的類名和動畫名，默認是局部，而:global的方式是全局的。

1.當引入一個CSS Modules到一個js文件里時，它導出的是一個對象。

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

2.全局的寫法
css文件時：global(.xxx)
less文件時

:global {
  .global-class-name {
    color: green;
  }
}

3.為什么使用CSS Modules？
模塊化并重用css
(1)不會造成沖突
(2)更明確的依賴關系
(3)沒有全局的

4.關于webpack
webpack里面有一個css-loader，它有一個參數modules決定是否使用CSS Modules，css-loader把所有局部空間標識用全局獨特的名字代替，然后導出用過的標識。

原文鏈接：https://github.com/css-modules/css-modules

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容