Express环境下EJS文件引入CSS样式不生效问题求助

按以下步骤逐一排查，基本能覆盖所有场景：

第一步：先修正Express静态资源配置 #

绝大多数问题都是静态托管配置写错导致的，不要用相对路径指向静态文件夹，必须用path模块拼接绝对路径：

const express = require('express')
const path = require('path')
const app = express()

// 静态资源配置必须写在路由、拦截器前面
// 假设asset文件夹和你的入口文件app.js/index.js是同级目录，就按下面写
app.use(express.static(path.join(__dirname, 'asset')))

注意：如果你没有给静态资源配置挂载前缀，EJS里引用资源时不要乱加多余路径前缀。比如你托管的是asset文件夹，那CSS文件的实际访问路径就是/css/style.css，你当前写的/crud_app/asset/css/style.css多了两层不存在的虚拟路径，请求必然404。

第二步：核对EJS中的引用路径 #

静态资源配置修正后，把link标签的href改成对应路径：

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

绝对不要用./css/style.css这类相对路径：如果页面路由是多级路径（比如/user/edit/123），相对路径会拼接在当前路由后，直接请求到错误地址。

第三步：用浏览器开发者工具定位具体错误 #

别盲目改路径，打开F12切到Network面板，刷新页面后找到style.css的请求，看状态码：

• 状态码404：路径不匹配，要么静态托管指向的文件夹不对，要么href写错，要么文件实际存放位置和你以为的不一样
• 状态码403：检查CSS文件、上层文件夹的读取权限，不要设置禁止访问的权限规则
• 状态码200但样式不生效：点进响应内容看，如果返回的是HTML代码，说明请求被路由兜底规则拦截了，根本没拿到CSS文件，还是路径配置错误

容易忽略的踩坑点 #

• 改完Express配置、EJS代码后必须重启Node服务，Node没有自动热更新，不重启所有修改都不生效
• 重启后用Ctrl+F5硬刷新浏览器，避免浏览器加载旧的缓存资源
• 注意文件名大小写，本地Windows环境不区分大小写，但部署到Linux服务器时大小写不一致会直接404
• 如果你写了全局登录拦截、权限校验中间件，必须把静态资源配置放在这类中间件前面，不然静态资源请求会被拦截

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