如何在Express中引入CSS文件？解决托管HTML时CSS未生效问题

问题原因 #

• 未配置静态资源服务：Express 默认不会自动处理 CSS、JS、图片这类静态文件的请求，当浏览器尝试加载 CSS 文件时，服务器找不到对应的路由处理逻辑，会返回 404 错误，导致样式无法生效。
• HTML 中 CSS 路径错误：如果 CSS 文件的引用路径与实际文件位置不匹配，或者使用了相对路径但未结合静态目录配置，也会导致加载失败。

解决步骤 #

1. 整理项目结构 #

建议将静态资源统一放在单独的目录下，比如 public 文件夹，示例结构如下：

项目根目录/
├── app.js          # 你的Express入口文件
├── index.html      # 要托管的HTML文件
└── public/
    └── css/
        └── style.css  # 你的CSS文件

2. 在Express中配置静态文件中间件 #

添加 express.static 中间件，指定静态资源目录，让Express能够处理静态文件的请求。修改你的代码如下：

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path'); // 引入path模块处理路径

const app = express();

// 配置静态资源服务，将public目录设为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({
  extended: true,
}));

app.get('/', (req, res) => {
  // 使用path.join拼接路径，避免系统路径分隔符差异导致的问题
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/', (req, res) => {
  console.log(req.body);
  res.send("You just posted");
});

app.listen(4400, () => {
  console.log("Server is running on port 4400");
});

3. 修正HTML中的CSS引用路径 #

在 index.html 中使用绝对路径引用CSS文件，路径从静态目录的根开始（即 public 目录对应URL的根路径）：

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

注意事项 #

• 不要使用相对路径（比如 ./css/style.css）引用静态资源，当页面路由发生变化时，相对路径会失效，绝对路径更可靠。
• 如果你的静态资源目录不在项目根目录下，需要调整 path.join(__dirname, 'public') 中的路径参数，确保指向正确的静态资源文件夹。

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