Create React App生产环境CSS未被浏览器加载问题求助

核心问题 #

你的index.html里的CSS link标签用错了属性：link标签加载样式表必须使用href属性，而非src。浏览器仅识别link[rel="stylesheet"]的href属性来发起资源请求，所以即便路径正确，用src的话浏览器也不会触发CSS文件的下载。

修复步骤 #

1. 修正link标签属性
   直接修改打包后index.html中的CSS引用标签，把src替换为href：

   <link href="/proxy/myusername/services/someserviceid/proxy/8098/static/css/main.e72c9739.css" rel="stylesheet">
   

2. 规范子路径部署（避免手动修改打包文件）
   借助CRA自带的PUBLIC_URL环境变量指定基础路径，打包时会自动生成正确的资源引用，无需手动修改index.html：

   # Linux/macOS环境
   PUBLIC_URL=/proxy/myusername/services/someserviceid/proxy/8098 npm run build
   # Windows cmd环境
   set PUBLIC_URL=/proxy/myusername/services/someserviceid/proxy/8098 && npm run build
   # Windows PowerShell环境
   $env:PUBLIC_URL="/proxy/myusername/services/someserviceid/proxy/8098"; npm run build
   

   这样生成的index.html会自动包含带正确基础路径的href属性link标签，和页面的base标签配合正常。

3. 优化Nginx配置
   建议通过Nginx的路径转发和重写处理子路径，避免手动修改响应内容：

   location /proxy/myusername/services/someserviceid/proxy/8098/ {
       proxy_pass http://localhost:3000/; # 替换为你的React应用实际运行端口
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
   }
   

   这种配置下，React应用只需按PUBLIC_URL打包，Nginx负责路径映射，无需修改响应体。

补充说明 #

开发环境中CSS被打包进bundle.js，是因为CRA在开发模式下用style-loader将CSS注入到JS中；而生产模式会自动抽离CSS为单独文件，所以必须通过正确的link标签加载。

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