React CSS Modules未生成类名问题求助

嘿，我来帮你排查这个问题！你遇到的类名不生成的情况，大概率是以下两个常见原因之一，咱们一个个来看：

1. 文件名不符合CSS Modules的默认匹配规则 #

Create React App（CRA）默认只对带.module.css后缀的文件启用CSS Modules。你现在用的是App.css，它会被当作全局CSS处理，不会触发你配置的modules: true规则。

解决办法： #

• 把你的样式文件名改成App.module.css，然后在组件里保持import classes from './App.module.css';的导入方式，这样就能匹配到CSS Modules的配置，生成预期的类名。
• 如果你不想修改文件名，那需要调整webpack配置里的moduleCssRegex（而非cssRegex），把它的正则规则改成匹配普通.css文件，但这样会让所有CSS都变成模块化的，可能影响全局样式，建议谨慎操作。

2. webpack配置存在语法错误 #

看你描述的配置修改代码：

getStyleLoaders({ modules:true, localIdentName:'[name]__[local]__[hash:base64:5]

这里明显缺少了闭合的引号和大括号，正确的写法应该是：

getStyleLoaders({ modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' })

语法错误会导致webpack解析配置失败，你的modules: true规则根本没生效，自然不会生成模块化类名。

最后别忘了重启开发服务器 #

修改完webpack配置后，一定要重启你的React开发服务器，不然新配置不会生效哦！

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan