javascript - CSS 未加载或应用于从服务器加载的页面

Question

关闭。这个问题需要debugging details .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

2年前关闭。




Improve this question




每个人:

遇到一个问题，我的 CSS 没有应用于我的页面，我不明白为什么。一切似乎都正确连接。我已经在 jsbin 上设置了我的代码，所以你可以看到所有内容:https://jsbin.com/waregut/edit?html,css,js,console,output

现在我有一个带有节点和 express 的服务器设置来加载我的页面。当我启动浏览器并转到 http://localhost:3000/ 时，它正在加载页面。 .唯一的问题是 CSS 没有加载或没有被应用。我查看了 chrome 开发人员工具，但没有显示任何 CSS 已应用在那里；在控制台中，它显示错误消息“拒绝应用来自 'http://localhost:3000/styles.css 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”在网络选项卡中，它在styles.css 下的响应 header 中显示:

HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'none'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 149
Date: Sat, 04 Jan 2020 18:02:27 GMT
Connection: keep-alive

请求 URL 为 http://localhost:3000/styles.css

如果有人能解释可能发生的事情，我将不胜感激。谢谢!

Answer 1

我认为您在 expressjs 代码中缺少静态文件处理

看看https://expressjs.com/en/starter/static-files.html

您应该添加如下内容:

app.use(express.static('public'));

并将您的styles.css 文件放在public 中文件夹

您正在处理 GET /和 POST /但没有匹配的处理程序GET /styles.css
所以可能 express 将其错误页面响应为 HTML 内容类型