网站部署到服务器后 CSS 文件加载成功，但是没有生效

最新推荐文章于 2024-11-24 21:00:00 发布

原创最新推荐文章于 2024-11-24 21:00:00 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #前端

过不去的坎专栏收录该内容

27 篇文章

订阅专栏

博客讲述了在前端代码部署到服务器后，样式未生效的问题排查过程。首先排除了nginx配置的静态资源路径问题，然后确认了CSS文件内容无误且已被正确请求。通过检查元素发现样式匹配，但在浏览器中并未构建CSSOM。最后发现是nginx配置文件缺少了MIME类型设置，导致服务器未能正确响应content-type，从而影响了样式应用。解决方案是添加`include mime.types;`到nginx配置，确保MIME配置生效。

刚解决了一个问题，前端代码发布到服务器后，样式没有生效。

开始以为 nginx 配置的静态资源路径有问题，通过 network 发现 css 文件确实请求成功。

然后怀疑代码有问题，查看 css 文件中其中一个 dom 节点的样式，确实能匹配上（data-xxx 一致），将样式拷贝后通过 elements 看板手动添加上，样式也生效了。

文件下载成功，内容没问题，但就是没有生效，好像浏览器并没有据此构建 CSSOM（这一点也许可以通过性能调试工具查看），如此神奇的事情之前没有遇到过。

后来发现原来是 nginx 配置错误，由于配置文件是事先组织好发给运维去部署的，所以没有对其仔细进行验证，nginx 配置文件中缺少了 MIME 配置：

include       mime.types;

nginx 的 conf 目录下默认有个文件 mimx.types，包含各种 MIME 配置，内容：


types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

   ...
}

右边是文件后缀，左边是关联这个文件类型的 MIME。

服务器会根据资源文件的后缀去 types 配置中查找对应的 MIME，然后将其添加到响应头 content-type 中，这样客户端收到响应后，才会知道该如何处理它，例如 text/css 会构建 CSSOM。