为什么我的CSS文件在Heroku部署时没有加载？ PS：I使用EJS
我已经在Heroku部署了我的应用程序。使用Node.js + Express + EJS。
但是由于某种原因，它没有加载我的CSS。
错误：
未检查的运行时。lasterror：消息端口在收到响应之前关闭。拒绝从'https：// ghyde..herokuapp.com应用样式/public/css/styles.css'因为其MIME类型（'text/html'）不是支持的样式表MIME类型，并且启用了严格的MIME检查。未能加载资源：服务器响应的服务器响应身份为404（找不到）
这些是我遇到的错误。当我检查页面时。
我的文件结构： 文件结构
const express = require("express");
const bodyParser = require("body-parser");
const date=require(__dirname +"/date.js");
const app = express();
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
header.ejs code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TO-DO LIST</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" >
</head>
请有人帮助我解决这个问题。
编辑：
- 上述错误（1和3）不是由于代码。它们是由于我的浏览器增加了扩展。
- 删除扩展后，错误1和错误3消失了。但是错误2仍然存在。
I have deployed my app on heroku. Using Node.js + Express + ejs.
But for some reason it is not loading my css.
Errors :
Unchecked runtime.lastError: The message port closed before a response was received.Refused to apply style from 'https://**.herokuapp.com/public/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Failed to load resource: the server responded with a status of 404 (Not Found)
These are the errors I'm getting. When I inspect the page.
My file structure :
File Structure
app.js code
const express = require("express");
const bodyParser = require("body-parser");
const date=require(__dirname +"/date.js");
const app = express();
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
header.ejs code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TO-DO LIST</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" >
</head>
Please someone help me with this issue.
Edit :
- The above mentioned errors (1 and 3) are not due to the code. They are due to the added extensions to my browser.
- After removing the extensions error 1 and error 3 were gone. But error 2 still present.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
经过严格的研究并尝试了很多方式，我最终能够自己解决我的问题。
我做了一些重大更改，我的问题得到了解决。
我已经更改了文件结构。
来自 this to this
我在视图目录中创建了一个名为partials的新目录，并将我的header.ejs and footer.ejs文件移动到该目录。
在header.ejs文件中，我从此更改了代码
到
在其他.ejs文件中，我包含了header.ejs和footer.ejs，如下所示：
这就是我能够解决问题的方法。
hakuna matata
After rigorous research and trying so many ways finally I'm able to resolve my issue by myself.
I have done some major changes, and my issue was resolved.
I have changed my file structure a little bit.
From this to this
I have created a new directory called partials in the views directory and moved my header.ejs and footer.ejs files to that directory.
In header.ejs file I have changed the code from this
to
In other .ejs files I have included the header.ejs and footer.ejs as follows:
And that's how I am able to solve my issue.
Hakuna Matata