EJS主文件无法正常引入CSS，部分页header、footer样式加载正常

问题根因 #

• 静态资源配置存在路径拼接错误，且冗余配置和已有规则冲突
• 主页面中CSS文件的引用路径和Express的静态资源映射规则不匹配

修复步骤 #

1. 修正app.js的静态资源配置 #

删除冗余的单独路由映射，引入path模块处理路径避免拼接错误，修改后的相关代码如下：

const express = require('express');
// 新增引入path模块处理跨平台路径
const path = require('path');
const app = express()
const port = 3000
const expressLayout = require("express-ejs-layouts");

// 替换原有所有静态资源相关的app.use配置
app.use(express.static(path.join(__dirname, "src/public")));

原有__dirname + "src/public/xxx"的写法缺少路径分隔符，会拼接成不存在的错误路径，path.join会自动适配不同操作系统的路径分隔符，从根源避免路径错误。你原本配置的第一行静态规则已经覆盖了css、img、js等所有静态资源目录，不需要再单独配置路由映射。

2. 修正主EJS文件的CSS引用路径 #

你已经将src/public目录映射为静态资源根目录，访问该目录下的资源不需要再加public前缀，把head中的link标签修改为：

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

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