React项目引入的CSS文件未被读取、样式不生效是什么原因？

你当前CSS不生效的核心原因是静态资源引用逻辑不符合React项目的运行规则：

• 只要你是用Create React App、Vite这类标准React脚手架开发，src目录属于源码编译目录，构建工具不会将该目录下的原始文件直接作为静态资源对外提供服务。你在HTML中写的../src/style.css、../src/index.js路径，浏览器发起请求时会直接返回404状态码，根本拿不到对应文件，样式自然不会生效。
• 你确认的「路径配置正确」只是本地文件系统层面的路径正确，开发服务器启动后，静态资源的访问根目录默认是public文件夹（Create React App）或项目根目录（Vite），浏览器无权直接访问src目录下的原始源码文件。

根据你实际使用的开发模式选择对应操作即可：

场景1：使用Create React App/Vite等标准脚手架 #

1. 打开public目录下的入口index.html文件，删除两行错误的资源引用：

   <link rel="stylesheet" href="../src/style.css" />
   <script src="../src/index.js"></script>
   

2. 打开src目录下的入口文件index.js，在文件最顶部添加CSS导入语句，脚手架会自动处理CSS的打包、注入逻辑：

   import './style.css'
   // 其余原有React、ReactDOM导入和挂载逻辑保持不变
   

3. 额外注意：Header组件里的图片路径./images/troll-face.png同样存在加载问题，你可以把images文件夹挪到public目录下，或者在组件顶部先导入图片再使用，避免图片404。

场景2：未使用脚手架，直接通过CDN引入React开发 #

1. 不要将CSS、JS、图片等静态资源放在src目录下，统一挪到和入口HTML同级、或HTML可直接访问的静态资源目录中，不要使用../src/这类跨源码目录的引用路径。
2. 调整引用路径后刷新页面，直到浏览器能正常请求到对应资源即可。

打开浏览器按F12唤起开发者工具，按以下顺序排查：

• 切到Console面板，查看是否存在CSS、JS资源加载失败的404报错
• 切到Network面板，筛选「CSS」类型，查看style.css的请求状态码，若为404则可直接确认是资源访问路径/静态资源配置问题
• 切到Elements面板，选中class为header的标签，查看右侧样式面板是否存在你写的.header相关样式规则，若没有则说明CSS文件未被成功加载。

内容的提问来源于stack exchange，提问作者Sarah Barlis