如何将单个CSS文件链接至不同文件夹下的所有HTML文件？

问题根源 #

你当前的app.Static配置仅映射了两个子目录：

• / 对应 static/home
• /signup 对应 static/signup

服务器未对static根目录做任何映射，因此HTML里用相对路径../style.css时，会被解析为http://localhost:3000/style.css，而这个路径没有对应的资源映射，自然返回404错误。

解决方案 #

步骤1：添加公共静态资源映射 #

在现有配置基础上，新增一条Static规则，把static根目录映射到一个公共路径（比如/assets）：

app.Static("/assets", "static")
// 保留原有配置
app.Static("/", "static/home")
app.Static("/signup", "static/signup")

步骤2：修改HTML的CSS引用路径 #

将两个HTML文件里的link标签改为绝对路径，直接指向公共资源路径下的CSS：

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

这样不管是/路径下的index.html，还是/signup路径下的signup.html，都能通过绝对路径正确访问到static/style.css文件。

补充说明 #

绝对路径不受当前HTML文件所在路径影响，能避免相对路径在不同层级页面下的解析问题，更适合多页面共享公共资源的场景。

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