CSS 由于 MIME 错误无法在网页上运行

Question

我看了很多论坛都找不到答案，因为我看到很多人都有这个问题。尝试加载我创建的网页，但 css 在将 index.html 更改为 ejs 文件后似乎不想工作。我遵循了教程和特定的修复程序，但一无所获。下面是我的 MIME 错误（图片）、server.js 和 json 文件。 enter image description here

const express = require("express");
const app = express();

const PORT = process.env.PORT || 4000;

app.set('view engine', 'ejs')

app.get ('/', (req, res) => {
    res.render("index");
});

app.get("/user/loginRegister", (req, res) => {
    res.render("loginRegister");
});

app.get("/user/custDash", (req, res) => {
    res.render("custDash");
});

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

app.listen(PORT, () => {

    console.log(`Server running on port ${PORT}`);
});

{
  "name": "buy_box_bandits_2.0",
  "version": "1.0.0",
  "description": "Working repository",
  "main": "./src/index.js",
  "scripts": {
    "start": "node ./src/server.js",
    "dev": "nodemon ./src/server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0/issues"
  },
  "homepage": "https://github.com/Caliber-Technical-Solutions/Buy_Box_Bandits_2.0#readme",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "pg": "^8.7.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

Answer 1

您指向 css 文件的链接无效，并呈现回退 HTML 而不是 CSS 文件。这就是错误提示 MIME 类型为 text/html 的原因。由于您的静态目录是 src/css，因此您需要在 ejs 模板中像 http://localhost:4000/loginStyles.css 一样加载。最好像下面这样定义静态目录：

import path from 'path';
...
app.use(express.static(path.resolve(__dirname, './css')));

CSS 由于 MIME 错误无法在网页上运行

CSS doesnt work on webpage because of MIME error

html

javascript

css

hyperlink

node.js