如何在Node.js应用中正确关联CSS样式表与HTML文件？

嘿，我来帮你搞定这个CSS没生效的问题～ 从你给出的代码片段来看，核心问题是你的服务器只处理了根路径的请求，返回HTML文件，但当浏览器去请求CSS文件时，服务器没有对应的处理逻辑，导致CSS加载失败。

问题分析 #

当浏览器加载你的test.html后，会根据HTML里的<link>标签去请求对应的CSS文件（比如style.css），但你的当前代码只会在用户访问http://localhost:8080/时返回test.html，对于http://localhost:8080/style.css这类请求，服务器没有处理，会返回404错误，自然CSS就不会生效了。另外，你原代码里的res.writeHead也没写完，得确保设置正确的Content-Type。

修复后的完整代码 #

下面是修改后的app.js，我添加了静态资源的处理逻辑，能正确返回HTML和CSS文件：

var http = require('http');
var port = 8080;
var dt = require('./module.js');
var fs = require('fs');
var path = require('path'); // 导入path模块处理文件路径

http.createServer(function (req, res) {
  // 解析请求的文件路径：根路径默认指向test.html
  let filePath = '.' + req.url;
  if (filePath === './') {
    filePath = './test.html';
  }

  // 根据文件扩展名设置对应的Content-Type
  const extname = String(path.extname(filePath)).toLowerCase();
  const contentTypeMap = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript'
  };
  const contentType = contentTypeMap[extname] || 'application/octet-stream';

  // 读取目标文件并返回给客户端
  fs.readFile(filePath, function(err, data) {
    if (err) {
      if (err.code === 'ENOENT') {
        // 文件不存在时返回404页面
        res.writeHead(404, {'Content-Type': 'text/html'});
        res.end('<h1>404 Not Found</h1>');
      } else {
        // 服务器内部错误时返回错误信息
        res.writeHead(500);
        res.end(`Server Error: ${err.code}`);
      }
    } else {
      // 成功读取文件，返回内容并设置正确的Content-Type
      res.writeHead(200, {'Content-Type': contentType});
      res.end(data, 'utf-8');
    }
  });
}).listen(port);

console.log(`Server running at http://localhost:${port}/`);

关键修复点说明 #

• 导入path模块：用来识别文件扩展名，给不同类型的文件设置正确的Content-Type（比如CSS必须设置为text/css，浏览器才会把它当作样式文件解析）
• 处理所有请求路径：不再只处理根路径，而是根据请求URL映射到本地对应的文件
• 错误处理：添加了文件不存在和服务器错误的处理逻辑，避免服务器崩溃，同时给客户端明确的反馈

额外注意事项 #

1. 确保你的CSS文件（比如style.css）和app.js、test.html放在同一个目录下
2. 检查test.html里的CSS引用路径是否正确，比如：

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

   这个相对路径要和服务器处理的文件路径对应上

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