坑爹的create-react-app 命令,把我害惨了!进来听我的复仇计划

前言

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

相关推荐
王哲晓10 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41114 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v15 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云25 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058727 分钟前
web端手机录音
前端
齐 飞33 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试