Express 中静态文件路径配置后 CSS 为啥不生效？

技术付娟提问于 2026-03-20 10:35:21 阅读 4

前端

我在 Express 里用 express.static('public') 挂载了静态资源目录，HTML 能正常加载，但引用的 CSS 样式完全没效果。浏览器 Network 面板显示 CSS 文件返回的是 HTML 内容，状态码 200，但 MIME 类型不对，这到底是哪儿配错了？

我的目录结构是 public/css/style.css，HTML 里写的链接是 <link rel="stylesheet" href="/css/style.css" rel="external nofollow" >，应该没错啊。

body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

我来解答赞 3 收藏

反馈

1 条解答

志欣的笔记 Lv1

兄弟，这个问题的关键点是路由顺序。

你描述的“CSS 返回 HTML 内容”说明请求根本没走到静态文件中间件，而是被其他路由先拦截了。检查一下你的 app.js 或 server.js，看看是不是把静态文件中间件放在了路由后面。

Express 是按顺序匹配中间件的，如果你先定义了类似这样的路由：

// 错误顺序示例

app.get('*', (req, res) => { res.send('404') });  // 这个会拦截所有请求

app.use(express.static('public'));  // 永远走不到这里

或者用了 router 但放在 static 前面加载，都会导致这个问题。

解决方法：把静态文件中间件放到所有路由之前。

// 正确顺序

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



// 然后才是你的其他路由

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

app.get('*', (req, res) => { res.status(404).send('Not Found'); });

你的目录结构和 HTML 引用路径都没问题，顺序改一下应该就好了。

2026-03-20 11:01