确实发出了对样式表的网络请求，但未将其应用于HTML

时间：2019-11-13 20:38:35

标签： html css

Initial situation

这是初始情况（来自Firefox开发人员工具的屏幕截图）。标头中有一个<link rel="stylesheet">。请注意，<body>元素（下部视口）没有应用任何样式。如您在第二张图片中所见，实际上已经发出了对此样式表的Web请求：

Web request to stylesheet

如果我转到Firefox开发人员工具中的Style Editor标签，并添加一个额外的字符（在本例中为import和body之间的换行符），这将导致Firefox更新样式表，并在这种情况下将样式应用于我的网页。

Style editor tab in Firefox Updated element inspector with applied styles

如何确保我的样式应用于页面加载？

编辑：我应该提到，在使用create-react-server的开发服务器测试应用或将python3 -m http.server用作Web服务器时，我没有这些问题。尽管我无法想象当所有Web服务器返回完全相同的静态内容时，服务器可能会产生什么变化，但这只会在我将Nginx用作服务器时发生。

1 个答案:

答案 0 :(得分：0)

问题是我的Web服务器发送的是MIME类型的text/plain而不是text/css。我在nginx中解决了这一问题，方法是将include mime.types;添加到html中的nginx.conf元素中，并创建一个具有以下内容的mime.types文件：

types {
  text/html                             html htm shtml;
  text/css                              css;
  text/javascript                       js;
}

对于使用docker nginx:latest映像的人们来说，这似乎是一个常见问题。

相关问题
最新问题