## 一、概述 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'] ```