## 一、概述 CSS Modules 不是一個官方的規范，也不是瀏覽器的一種機制，它是一種構建步驟中的一個進程。（構建通常需要 webpack 或者 browserify 的幫助）。通過構建工具的幫助，可以將 class 的名字或者選擇器的名字作用域化。（類似命名空間化），這樣設計的目的在于解決 CSS 中的全局作用域問題。 有了 CSS Modules，就可以確保所有的樣式能夠服務于單個組件； >[danger] 簡單來說，CSS Modules就是通過構建工具來使指定class達到scope的過程； * 集中在一個地方 * 只應用于那個組件，其他組件不適用 ## 二、Webpack 對 CSS Modules 的配置 css modules 最簡單的情形，只需要在 css-loader 啟動 css module 配置即可。 一般項目中，會有 global.css 這樣的全局 css 樣式，這些樣式不需要用作?css module，此時可以配置兩種 css 管理方式（對? global.css 不作 css module 處理，其余的進行?css module 處理）。 ``` module: { rules: [{ test: /\.(css|scss)$/, exclude: path.resolve(__dirname, 'src/styles/global'), use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]-[hash:base64:5]' } }, 'sass-loader' ] }, { test: /\.(css|scss)$/, include: path.resolve(__dirname, 'src/styles/global'), use: [ 'style-loader', 'css-loader', 'sass-loader' ] }] }, ``` ## 三、用法 1、開啟css modules功能 由于css modules對樣式的處理邏輯是放在loader中，所以在css-loader中開啟css-loader； ``` test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: './build/styles' } }, { loader: "css-loader", options: { importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" // 為了生成類名不是純隨機 } } ] } ``` 2、修改index.js文件中對樣式的引入方式； ~~~ import?styles?from?'./index.css';?// 導出對象的格式是鍵值對 ~~~ 3、編譯之后的類使用； ``` //index.css .color{ color:blue; } // index.js import styles from './index.css'; // 導出對象的格式是鍵值對 // jsx <div class={styles.color}>使用轉化后的類名</div> // 如果以下劃線給類命名使用styles['color-style'] ```