这是初始情况(来自 Firefox 开发者工具的屏幕截图)。有一个<link rel="stylesheet">在标题中。注意没有任何样式应用于 <body>元素(下视口(viewport))。正如您在第二张图片中看到的，对该样式表的 Web 请求实际上已经发出:
如果我去 Style Editor在 Firefox 的开发人员工具中添加一个额外的字符(在本例中为 import 和 body 之间的换行符)，这会导致 Firefox 更新样式表，当发生这种情况时，样式会应用到我的网页。
如何确保在页面加载时应用我的样式？
编辑:我应该提一下，我在使用 create-react-server 测试我的应用程序时没有遇到这些问题。的开发服务器或使用 python3 -m http.server 时作为网络服务器。只有当我使用 nginx 作为服务器时才会发生这种情况，尽管我无法想象服务器会产生什么不同，因为所有 Web 服务器都返回完全相同的静态内容。
最佳答案
问题是我的网络服务器发送了 text/plain 而不是 text/css 的 MIME 类型。我通过将 include mime.types; 添加到 nginx.conf 中的 html 元素并创建一个 mime.types 在 nginx 中解决了这个问题 包含以下内容的文件:
types {
text/html html htm shtml;
text/css css;
text/javascript js;
}
这似乎是使用 docker 的 nginx:latest 图像的人的常见问题。
关于html - 确实发出了样式表的网络请求，但未应用于 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58845264/