React+TypeScript项目生产构建后CSS文件无法加载求助

核心原因 #

Firefox报错CSS文件MIME类型为text/plain，说明Nginx未正确配置静态资源的MIME类型，导致浏览器无法识别并解析CSS文件，最终样式无法加载。

解决方案 #

1. 修正Nginx的MIME类型配置 #

打开Nginx的配置文件（通常是nginx.conf或站点专属配置文件），确保添加正确的CSS类型映射：

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # 若mime.types中无CSS配置，手动补充
    types {
        text/css css;
    }

    # 其他原有配置...
}

• 先检查/etc/nginx/mime.types文件是否包含text/css css;，没有则手动添加到types块中。
• 修改完成后重启Nginx容器：docker exec <你的nginx容器名> nginx -s reload

2. 验证React构建产物的路径配置 #

检查build文件夹内的index.html，确认CSS文件的引用路径无误，示例正确路径：

<link rel="stylesheet" href="/static/css/main.[hash].css">

同时确保Nginx站点配置中root指向正确的build目录：

server {
    root /usr/share/nginx/html; # 此处需指向React构建后的build文件夹
    index index.html index.htm;

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

3. 检查Docker构建步骤的正确性 #

确认Dockerfile中已正确将React构建产物复制到Nginx静态资源目录，示例Dockerfile片段：

# 构建阶段
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 部署阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• 重点核对COPY --from=builder的路径，确保复制的是正确的build文件夹内容。

4. 强制清除浏览器缓存 #

生产环境下浏览器可能缓存了旧资源，按Ctrl+Shift+R强制刷新页面，或在开发者工具中禁用缓存后重新加载。

内容的提问来源于stack exchange，提问作者Baran Öden