React应用部署AWS EC2(Nginx)：CSS加载200但样式不生效

1. 检查Nginx静态文件配置 #

确保Nginx正确将/static/路径映射到React构建后的build/static目录，示例配置如下：

server {
    listen 80;
    server_name X; # 替换为你的服务器IP或域名

    root /path/to/your/react/app/build;
    index index.html;

    location /static/ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

重点确认root指向的是React构建生成的build文件夹，/static/的location配置无错误映射。

2. 验证CSS的MIME类型配置 #

Nginx若未正确设置CSS的MIME类型，会导致浏览器无法识别样式文件。可在Nginx的http块或当前server块中添加：

types {
    text/css css;
}

或确认主配置文件已包含默认的mime.types配置（通常该文件会自带CSS的MIME类型定义）。

3. 核对CSS选择器的优先级与正确性 #

在Chrome开发者工具的Elements面板中，查看目标元素的Styles标签：

• 确认CSS文件中的选择器是否存在，是否被划掉（划掉代表被更高优先级样式覆盖）
• 检查React组件的类名是否与CSS中的类名完全一致，排查构建过程中是否意外压缩或修改了类名

4. 检查HTML中link标签的有效性 #

再次核对index.html中的link标签，确保无拼写错误或禁用属性：

<link href="/static/css/main.7bda9ab3.css" rel="stylesheet">

5. 确认React构建配置 #

若使用Create React App，检查package.json中的homepage字段：

• 部署在根路径时，设置为"homepage": "."或直接删除该字段，避免打包生成错误的资源路径
• 重新执行npm run build，确认build/static/css下的文件内容正确，且build/index.html中的link路径无误

6. 排查Content-Security-Policy（CSP）限制 #

若页面设置了CSP规则，可能阻止了样式文件加载。在Chrome开发者工具的Console面板查看是否有CSP相关错误提示，调整规则允许加载本地CSS文件。

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