React项目部署Docker后App.css样式未生效问题求助

先从项目本身排查 #

• 检查App.js里有没有正确导入App.css：确认是否写了import './App.css';
• 确认组件元素用的是className而非class，且类名和CSS文件里的完全匹配（注意大小写、拼写）
• 本地先执行npm run build，用本地服务器打开build文件夹的页面验证样式是否正常。如果本地构建后样式就有问题，说明和Docker无关，是项目本身的配置问题

再检查Docker和Nginx配置 #

• 查看Docker构建日志，确认npm run build无报错，build文件夹正常生成
• 进入Docker容器，检查/usr/share/nginx/html目录下文件是否完整，尤其是static/css里的CSS文件是否存在
• 修改nginx.conf的server块，新增静态资源处理规则，确保CSS、JS等文件能被正确加载：

server {
    listen 80;
    server_name localhost;

    location / {
      root /usr/share/nginx/html;
      index index.html;
      try_files $uri $uri/ /index.html;
    }

    # 新增静态资源处理规则
    location ~* \.(css|js|png|jpg|svg)$ {
        root /usr/share/nginx/html;
        expires 30d;
    }
}

最后尝试清除浏览器缓存 #

部署完成后按Ctrl+F5强制刷新浏览器，清除缓存后再查看样式是否生效

用户提供的配置信息 #

Dockerfile #

FROM node:20.10.0 AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest

COPY --from=build /app/build /usr/share/nginx/html

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.conf #

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  sendfile on;

  server {
    listen 80;
    server_name localhost;

    location / {
      root /usr/share/nginx/html;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
  }
}

客户端截图 #

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