前言
最近在搭建react项目时，使用了npx create-react-app xxx 来创建一个react项目，结果发现和我以前的项目组的react项目的css module规则不一致,排查了一个小时无果，还发了沸点求助JYM,但仍没有得到想要的答案，于是我继续狠狠深入研究了一下
具体不同点
经常性的，我们在react项目中会使用.module.css的引入方式在.jsx/js/tsx文件中引入样式 .module.css文件长这样 （@apply 和原子化写法是tailwindcss写法）
而.jsx文件通常是这样 我们对每个类名的使用都需要借助一个styles对象才能使用
并且这种使用方式会使所有类名都加上哈希后缀
而当我回想起来上家公司的react项目中不需要这样做 上家公司的.jsx文件是这样使用的
只需要对最顶级的节点的类名用styles包一下，这样就能正常的使用，写起来很方便，同时组件顶层节点还包含了正常的类名哈希，使得类名不会有污染，做到组件间的隔离，页面表现如下
于是我开始思考这其中的原因，经过几个小时的查阅资料和AI对话，我总算找出了问题所在
问题所在
实际上是css-loader的配置问题，由于我是使用的create-react-app脚手架创建的项目，真是坑死我了！！！他其实自带了webpack的配置，也帮我们预设好了css-loader的配置，使用的modules模式是local,而我们需要使用npm run eject命令,才能把那些预设配置文件显示在我们的本地文件夹里，eject后，会多出几个文件夹
然后只需要把webpack.config.js文件中的css-loader的modules的mode配置项改成global,如下： 这样就能实现我上家公司项目的那个效果，只是一行配置问题，我排查了近三个小时，弄明白之后自己都想笑，因为css-loader的文档写的实在是不太详细，调试了很久才彻底弄懂。
难怪我上家公司的react构建工具没有选择webpack，而是使用vite创建的react项目，我和前端同事沟通，发现还有很多craco构建的react项目，都避开了繁琐的webpack配置，实在是蚌埠住了，也是又学到了。知道的大佬们见笑了。轻喷。