EJS无法加载CSS求助：已引入header但样式未生效

你已经做了不少排查工作，核心问题出在静态资源的路径配置上，咱们一步步来修正：

1. 调整Express静态资源目录配置 #

你当前把express.static直接指向了具体的CSS文件夹，这会让资源访问路径变得局限。建议把静态目录提升到public层级，这样所有public下的静态资源（CSS、JS、图片等）都能被统一访问：

// server.js 修改为
app.use(express.static(__dirname + '/client/vanity/public'));

配置后，public文件夹就成为静态资源的根目录，里面assets/css下的文件可以直接通过/assets/css/xxx.css的路径访问。

2. 修正header.ejs里的CSS引用路径 #

你当前的href路径/../assets/css/normalize.css/有两个明显问题：

• ../会让浏览器尝试向上回退目录，但我们已经把public设为静态根目录，不需要回退操作
• 路径末尾的斜杠/是多余的，会导致服务器无法正确识别文件

修改header.ejs里的link标签：

<!-- header.ejs 修改后 -->
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/skeleton.css">

3. 验证EJS Include语法（可选） #

如果你的EJS版本较新，建议用<%- include('header') %>语法（注意是<%-而非<%，这样能正确解析HTML标签）。另外如果header.ejs本身就在views目录下，不需要加views/前缀——Express默认的视图目录就是views。

4. 最后验证 #

启动服务器后，先在浏览器地址栏直接访问http://localhost:你的端口号/assets/css/normalize.css，如果能看到CSS文件的内容，说明静态资源配置没问题；再刷新index页面，样式应该就能正常加载了。

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