将HTML转为EJS后网页CSS失效、报MIME类型错误该如何解决

问题根因 #

你代码存在两处核心配置错误，直接导致CSS加载失败、MIME类型报错：

1. express.static静态资源中间件的注册顺序错误：Express 会按代码书写顺序依次匹配中间件和路由规则，你将静态资源中间件放在所有路由定义之后，请求CSS文件时会先进入路由匹配逻辑，匹配失败才会走到静态资源中间件，大概率返回错误的响应内容，导致浏览器识别到的MIME类型不符合CSS要求。
2. 未使用绝对路径指定静态资源目录：如果Node.js运行时的工作目录和项目根目录不一致，会直接找不到css文件夹，返回HTML格式的404页面，浏览器将HTML内容当成CSS解析就会触发MIME报错。

修复步骤 #

1. 调整server.js代码，引入path模块拼接绝对路径，同时把静态资源中间件放到所有路由规则之前：

const express = require("express");
// 引入path模块处理路径
const path = require("path");
const app = express();

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

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

// 静态资源中间件注册放到最前面
// 如果你的css文件夹和server.js同目录，用path.join(__dirname, 'css')
// 如果css文件夹在项目根目录，server.js在src文件夹下，就用path.join(__dirname, '../css')
app.use(express.static(path.join(__dirname, 'css')));

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.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

2. 修改EJS文件中的CSS引用路径，不要用相对路径，直接使用根路径：
   假设你的css目录下有main.css文件，引用写法如下：

<link rel="stylesheet" href="/main.css">

可选优化（推荐） #

如果后续需要管理JS、图片等更多静态资源，建议统一放到项目根目录的public文件夹下分类管理，结构更清晰：

项目根目录
├── src/
│   ├── server.js
│   └── views/
│       └── index.ejs
└── public/
    ├── css/
    │   └── main.css
    ├── js/
    └── images/

对应的静态资源中间件配置修改为：

app.use(express.static(path.join(__dirname, '../public')));

EJS中CSS引用写法调整为：

<link rel="stylesheet" href="/css/main.css">

内容的提问来源于stack exchange，提问作者Link