前言
最近在搭建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配置,实在是蚌埠住了,也是又学到了。知道的大佬们见笑了。轻喷。