如何在Node.js服务器中引入CSS文件并关联到HTML页面

安全阿岳

2026-8-30

Node.js服务加载HTML时正确引入关联CSS的实现方案

前置文件准备

首先确保项目根目录下存在两个核心文件：

样式文件styles.css，写入基础样式代码：

body{
    margin:0px;
}

页面文件index.html，需要在<head>标签内添加CSS引入标签，路径和后端路由保持一致：

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

实现原理

浏览器加载HTML页面时，会自动识别页面内的外部资源引用（样式、脚本、图片等），单独发起HTTP请求拉取对应资源。很多人写的服务只处理了根路径的HTML返回，没有处理CSS资源的请求，或者返回CSS时没加正确的Content-Type响应头，就会导致样式不生效。
核心要点：返回CSS资源时必须设置响应头Content-Type: text/css，浏览器才会将返回内容识别为样式规则解析应用。

完整服务端代码

var http = require('http');
var fs = require('fs');

// 通用文件发送工具方法
function sendFile(res, filename, contentType) {
    fs.readFile(filename, function(err, fileData) {
        if (err) {
            console.error('资源读取失败：', err);
            res.statusCode = 404;
            res.end('Resource Not Found');
            return;
        }
        res.writeHead(200, { 'Content-Type': contentType });
        res.write(fileData);
        res.end();
    });
}

http.createServer(function(req, res) {
    // 访问根路径返回HTML页面
    if (req.url === "/") {
        sendFile(res, "index.html", "text/html");
    } 
    // 匹配CSS资源请求，返回样式文件
    else if (req.url === "/styles.css") {
        sendFile(res, "styles.css", "text/css");
    } 
    // 其余未匹配路径统一返回404
    else {
        res.statusCode = 404;
        res.end('Resource Not Found');
    }
}).listen(8080, () => {
    console.log('服务已启动，访问 http://localhost:8080 查看效果');
});