ejs/pug中css失效主因是路径错误：须用绝对路径（如/css/main.css）引用静态目录文件，禁用相对路径；pug内联css需用!=或cdata避免转义；ejs拼路径应传入预计算url并设默认值。
直接在 EJS 模板里用 <link> 引入 CSS 会失效？
因为 EJS 和 Pug 是服务端模板引擎，<link rel="stylesheet"> 标签本身没问题，但如果你把 CSS 路径写成相对路径（比如 ./styles/main.css），浏览器根本找不到——它只认静态资源服务器暴露的路径，不认你项目目录结构。
常见错误现象：404 Not Found 控制台报错，样式完全不生效；或者开发时看着正常，部署到 Nginx 后全挂了。
- 确保所有 CSS 文件放在 Express（或其他后端）配置的静态目录下，比如
public/，然后在模板中用绝对路径引用：<link href="/css/main.css" rel="stylesheet"> - 不要用
../或./开头的路径，EJS/Pug 渲染时不会帮你 resolve 到 public 目录 - 如果用了构建工具（如 Vite、Webpack），CSS 可能被哈希重命名，得靠插件或服务端注入真实文件名，不能硬编码
Pug 中用 style 标签内联 CSS 为什么没渲染？
Pug 默认会转义所有内容，style 标签里的 CSS 如果直接写成普通缩进块，会被当成纯文本处理，最终输出的是转义后的字符串，不是可执行样式。
使用场景：调试时快速加几行样式，或需要根据变量动态生成少量样式（比如主题色）。
立即学习“前端免费学习笔记（深入）”；
两种html5图片展示效果，动画效果流畅，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、在head区域引入样式表文件app.css，index.css和fonts.css 2、在你的网页中加入注释区域代码即可 3、图标均使用Web开放字体，具体文件见css目录
- 必须显式用
unescaped语法：style: - 更稳妥的做法是用
style: |+!=（Pug 3.0+）：!= '<style>body{background:' + bgColor + '}</style>' - 别在
style块里写复杂逻辑，容易破坏 HTML 结构；大量样式仍应走外链
EJS 的
典型问题是变量未定义、路径拼错，或环境差异导致 process.env.NODE_ENV 判断失灵，结果本地能跑，生产环境 404。
参数差异：开发时可能用 /css/app.css，构建后变成 /css/app.a1b2c3.css，而 EJS 不知道这个映射关系。
- 避免手拼路径，把最终 URL 提前算好传进模板：
res.render('home', { cssUrl: '/css/app.' + hash + '.css' }) - 如果用 Webpack，可通过
webpack-manifest-plugin生成映射 JSON，在服务端读取并注入到模板上下文 - 检查变量是否为
undefined，EJS 遇到未定义变量会静默失败，建议加默认值：<link href="<%=%20cssUrl%20%7C%7C%20'/css/app.css'%20%>">
用 res.locals 注入全局 CSS 链接靠谱吗？
可以，但容易忽略作用域和覆盖逻辑。比如多个中间件都往 res.locals.styles 里 push，顺序不对就会漏掉或重复。
性能影响：每次请求都做字符串拼接或数组操作，对高并发无实质负担，但可读性差、难调试。
- 推荐用数组收集，模板里统一遍历：
{ %><link href="<%=%20url%20%>" rel="stylesheet"> - 别在模板里做条件判断（如
if user.isAdmin再加一个 CSS），逻辑提前收口到路由或中间件 - 注意缓存：如果 CSS URL 包含时间戳或版本号，确保 CDN 或浏览器没缓存旧链接
最麻烦的其实是构建与部署之间的路径映射断层——模板看到的 URL 和实际静态文件位置对不上，这个问题不解决，其他所有写法都会反复踩坑。
