Express加载CSS报错：MIME类型为text/html而非text/css求助

核心问题分析 #

你的问题源于两个关键错误：

1. 静态资源目录路径配置错误：index.js位于项目根目录，但代码中静态资源中间件指向的是根目录下的public文件夹，而实际public在src/public中，导致Express无法找到main.css，请求被后续中间件拦截返回index.html，从而出现MIME类型不匹配。
2. 主页路由拦截所有请求：使用app.use('/', ...)会匹配所有HTTP请求（包括静态资源请求），即使静态资源路径正确，非主页请求也会被强制返回index.html。

修改后的代码 #

修正静态资源路径与路由 #

import express from 'express';
import dotenv from 'dotenv';
import bodyParser from 'body-parser';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import path from 'path';

dotenv.config();

import { compileSassAndSaveMultiple } from 'compile-sass';

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

const app = express();

const __dirname = dirname(fileURLToPath(import.meta.url));

// 修正静态资源路径，指向src/public
app.use('/', express.static(path.join(__dirname, 'src/public'))); 
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.json());

// 修正Sass编译的路径
await compileSassAndSaveMultiple({
  sassPath: path.join(__dirname, 'src/public/scss/'),
  cssPath: path.join(__dirname, 'src/public/css/'),
  files: ['main.scss'],
});

// 将app.use改为app.get，仅处理主页GET请求
app.get('/', (req, res, next) => {
  res.sendFile(path.join(__dirname, 'views/index.html'));
});

app.listen(PORT, () => console.log(`Listening on port: ${PORT}`));

关键修改点说明 #

• 静态资源路径修正：将path.join(__dirname, 'public')改为path.join(__dirname, 'src/public')，确保Express能正确找到css/main.css文件。
• 路由方法修正：用app.get('/', ...)替代app.use('/', ...)，只响应主页的GET请求，避免拦截静态资源和其他API请求。
• Sass编译路径修正：同步调整sassPath和cssPath，确保编译后的CSS文件输出到正确的静态资源目录。

验证修改 #

启动服务后，浏览器请求/css/main.css时，Express会从src/public/css/main.css返回正确的CSS文件，MIME类型自动设置为text/css，样式即可正常加载。

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