使用Node.js查找CSS文件：从header.ejs加载main.css失败求助

嘿，我来帮你搞定这个CSS加载失败的问题！

首先，你现在用的相对路径../../public/stylesheets/main.css是问题所在——EJS模板渲染后，浏览器是从服务器根目录去请求资源的，不是从header.ejs文件所在的物理位置计算相对路径的，所以这个多级回退的路径大概率找不到文件。

下面是具体的解决步骤：

1. 确认项目结构（以Express项目为例） #

先检查你的项目结构是否符合常规的Node.js项目布局，应该是类似这样的：

你的项目根目录/
├── public/          # 静态资源文件夹，存放CSS、JS、图片等
│   └── stylesheets/
│       └── main.css # 你的目标CSS文件
├── views/           # EJS模板文件夹
│   ├── header.ejs   # 你的头部模板
│   └── 其他模板文件...
├── app.js           # 服务器入口文件
└── package.json

2. 配置静态资源服务（关键步骤） #

在你的服务器入口文件（比如app.js）里，必须告诉Express去哪里找静态资源，添加这段代码：

const express = require('express');
const app = express();

// 配置public文件夹为静态资源目录
app.use(express.static('public'));

这一步会让Express把public文件夹下的所有资源暴露给浏览器，访问路径直接从public的子目录开始。

3. 修改header.ejs里的CSS引用路径 #

把原来的相对路径改成根路径开头的路径，直接指向stylesheets下的main.css：

<link type="text/css" rel="stylesheet" href="/stylesheets/main.css">

这样不管你的header.ejs放在views下的哪个位置，浏览器都会从服务器根目录请求/stylesheets/main.css，而Express会自动映射到public/stylesheets/main.css。

额外排查点 #

• 确认public文件夹的拼写完全正确（区分大小写！比如不要写成Public）
• 检查main.css的路径和文件名是否完全匹配，有没有打错字
• 修改配置后记得重启你的Node.js服务器，确保配置生效

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