为什么我的 css 文件在部署到 heroku 时没有加载？ P.S: 我正在使用 ejs

Question

我已经在 heroku 上部署了我的应用程序。使用 Node.js + Express + ejs.

但由于某种原因它没有加载我的 css。

错误：

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)

这些是我遇到的错误。当我检查页面时。

我的文件结构： File Structure

app.js代码

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代码

<!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 仍然存在。

Answer 1

经过严格的研究和尝试了很多方法，我终于能够自己解决我的问题。

我做了一些重大更改，我的问题得到了解决。

我稍微改变了我的文件结构。
来自this to this
我在视图目录中创建了一个名为 partials 的新目录，并将我的 header.ejs 和 footer.ejs 文件移动到该目录。
在 header.ejs 文件中我已经更改了代码

<link href="css/styles.css" rel="stylesheet" type="text/css" >

至

<link href="/css/styles.css" rel="stylesheet" type="text/css" >

在其他 .ejs 文件中，我包含了 header.ejs 和 footer.ejs，如下所示：
```
<%- include("partials/header"); -%>
<%- include("partials/footer"); -%>
```

这就是我解决问题的方式。

Hakuna Matata

为什么我的 css 文件在部署到 heroku 时没有加载？ P.S: 我正在使用 ejs

Why my css file is not loading when deployed in heroku? P.S: I'm using ejs

heroku

ejs

web-deployment

node.js

express