nginx部署静态站引用css文件样式不生效

2024-09-14 12:10Full Stack

打包后的React项目,在nginx配置域名后,所有css文件对应的样式都失效了,文件看着都是正常引用的,也都可以加载起来,本地dev模式也都是好的。

刚开始一直以为是打包配置问题,后来经过仔细对比以后,发现加载过来的css文件的 Response Headers 中的content-type 都是 text/plain,在nginx中加入如下配置即可将content-type 设置成正确的 text/css, 否则浏览器不会将css文件中的样式渲染到html上


server {

    .....
    
    # 配置文件的 MIME 类型
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
}