由于 MIME 错误，CSS 在网页上不起作用

Posted 2023-03-25

【中文标题】由于 MIME 错误，CSS 在网页上不起作用

【英文标题】：CSS doesnt work on webpage because of MIME error

【发布时间】：2021-12-20 08:36:32

【问题描述】：

查看多个论坛我找不到答案，因为我看到很多人都有这个问题。尝试加载我创建的网页，并且在将 index.html 更改为 ejs 文件后，css 似乎不想工作。我已经按照教程和特定的修复程序进行了操作，但什么也没有。下面是我的 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"
  

【参考方案1】：

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

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

【讨论】：

非常感谢！有了那个 ^ 和其他一些小的变化，它就起作用了。谢谢你，我真的很感激！