CSS Modules入门及React中实践（内附webpack4配置） (2)

您不必强迫使用camelCase命名约定。

每次使用CSS模块时，不需要引用样式对象。

全局CSS和CSS模块之间有明显的区别，例如

工作原理

那么该babel插件是怎么工作的呢？让我们从官方文档入手：

翻译如下：
1. 构建每个文件的所有样式表导入的索引（导入具有.css或.scss扩展名的文件）。
2. 使用postcss 解析匹配到的css文件
3. 遍历所有 JSX 元素声明
4. 把styleName 属性解析成匿名和命名的局部css模块引用
5. 查找与CSS模块引用相匹配的CSS类名称：
* 如果styleName的值是一个字符串字面值，生成一个字符串字面值。
* 如果是JSXExpressionContainer，在运行时使用helper函数来构建如果styleName的值是一个 , 使用辅助函数（[getClassName]在运行时构造className值。
6. 从元素上移除styleName属性。
7. 将生成的className添加到现有的className值中（如果不存在则创建className属性）。

使用实例

在成熟的项目中，一般都会用到CSS预处理器或者后处理器。

这里以使用了scss预处理器为例子，我们来看下如何使用。