React 项目部署到 Nginx 后 CSS 文件 Content-Type 错误为 text/plain 导致样式失效，根本原因是 Nginx 未正确识别 .css 扩展名，需检查并确保 mime.types 已引入且含 text/css css; 行，或在 location 块中显式设置 types { text/css css; } 或 add_header Content-Type text/css;，同时验证响应头并补充 gzip_types 等配置。
React 项目构建后部署到 Nginx，常遇到 CSS 文件（如 main.abc123.css）返回的 Content-Type 是 text/plain 而非 text/css，导致浏览器拒绝加载样式，页面白屏或无样式。根本原因是 Nginx 未正确识别 `.css` 扩展名对应的 MIME 类型，尤其在精简版 Nginx 或自定义配置中容易缺失。
确认并修复 Nginx 的 MIME 类型配置
Nginx 通过 mime.types 文件映射扩展名与 Content-Type。需确保该文件已引入且包含 CSS 条目：
- 检查主配置（通常是
/etc/nginx/nginx.conf）中是否包含：include /etc/nginx/mime.types; - 打开
/etc/nginx/mime.types，确认存在这一行：text/css css; - 若缺失，手动添加；若文件被注释或路径错误，修正后执行
sudo nginx -t测试配置，再sudo systemctl reload nginx
强制为静态资源设置正确的 Content-Type（备用方案）
当无法修改全局 mime.types，或需对特定目录精细化控制时，可在 server 或 location 块中显式设置：
- 在对应
location块内添加：types { text/css css; } - 更彻底的做法（推荐用于 React 静态资源目录）：
location ~ \.css$ { add_header Content-Type text/css; } - 同理可补充 JS、SVG、WebP 等常见类型，避免类似问题扩散
验证是否生效及常见干扰项
修复后需实际验证响应头，而非仅看文件后缀：
- 用浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到 CSS 请求 → 查看 Response Headers 中的
Content-Type - 注意：若使用了
gzip on且未配置gzip_types包含text/css，压缩可能失败但不报错，间接影响响应；建议补上：gzip_types text/css application/javascript image/svg+xml; - 检查是否有其他中间件（如 CDN、反向代理层）覆盖了 Content-Type，此时需在其侧同步修复
只要 MIME 映射准确、Nginx 配置加载无误，CSS 的 Content-Type 错误就能根治。重点不在 React 本身，而在 Nginx 对静态资源类型的认知是否完整。
