Express+Node.js项目样式表已链接但未生效的解决求助

看起来你的问题核心是自定义CSS已经被浏览器成功加载，但样式没有应用到页面上，结合你的代码来看，我发现了几个关键问题，咱们一步步来解决：

1. 修复CSS文件的引用路径 #

你在header.ejs里用了相对路径./stylesheets/app.css来引用CSS文件，这会在不同路由下出问题：

• 当你访问根路径/或者/blogs时，相对路径会解析为/stylesheets/app.css，这是正确的；
• 但当你访问/blogs/new时，相对路径会被解析为/blogs/stylesheets/app.css，这显然找不到你的文件（因为你的CSS实际在public/stylesheets/app.css）。

解决方案：把路径改成绝对路径，去掉开头的./：

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

这样不管当前在哪个路由下，浏览器都会从根目录开始查找CSS文件，匹配你通过express.static配置的静态资源路径。

2. 修复jQuery的引用错误 #

你的header.ejs里的jQuery引用标签写错了，把src写成了rel，这会导致jQuery加载失败，而Semantic UI依赖jQuery，可能间接影响样式或交互效果：

<!-- 错误写法 -->
<script type="text/javascript" rel="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- 正确写法 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

3. 验证样式优先级（可选） #

如果上面的修改后还是有问题，可以检查自定义CSS和Semantic UI的样式优先级：

• 比如你的body{background-color:red;}如果被Semantic的样式覆盖，可以尝试增加优先级，比如写成body.ui.container{background-color:red;}或者用!important（不推荐，但可以用来快速测试）。

测试验证 #

修改完后重启你的Express服务器，然后分别访问/blogs和/blogs/new页面，检查浏览器的控制台是否还有资源加载错误，同时查看元素的样式面板，确认你的自定义CSS规则是否被正确应用。

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