Express.js嵌套路由下CSS文件无法生效的问题求助

问题根源在于CSS文件的相对路径引用导致解析错误：

• 访问/notes时，浏览器会把style.css解析为根路径下的/style.css，刚好匹配你通过express.static('public')配置的静态资源路径，因此样式生效。
• 但访问/notes/add时，浏览器会把相对路径style.css解析为/notes/style.css，而你的静态文件实际存放在根路径对应的public目录下，该路径不存在，所以加载失败并报错。

解决方案一：使用绝对路径引用静态资源 #

直接修改两个EJS文件中的CSS引用路径为绝对路径，确保无论当前路由层级如何，浏览器都从根路径请求资源：

修改views/notes.ejs和views/add.ejs中的<link>标签：

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

解决方案二：配置静态资源虚拟前缀（适合复杂项目） #

如果后续静态资源较多，希望统一管理路径，可以给静态资源添加虚拟前缀：

1. 修改index.js中的静态资源配置：

// 替换原有的express.static配置
app.use('/static', express.static('public'));

2. 同步修改两个EJS文件中的CSS引用路径：

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

两种方案任选其一，修改后重启Express服务，访问/notes/add即可看到样式正常生效。

内容的提问来源于stack exchange，提问作者Corné Düring