pug中link标签404主因是路径未按静态资源服务器url配置，须用绝对路径如/css/main.css而非相对路径；内联css需用!=或cdata避免转义，动态引入应通过manifest.json注入真实构建路径并设兜底值。
直接在 Pug 模板里写 <link rel="stylesheet"> 是可行的，但 90% 的样式失效问题都出在路径或转义上，不是语法不会用。
为什么 link 标签在 Pug 里总 404？
根本原因是：Pug 是服务端渲染，它不 resolve 文件系统路径；浏览器只认静态资源服务器暴露的 URL 路径。你写 ./styles/main.css 或 ../public/css/app.css，浏览器会按当前页面 URL 去拼，几乎必错。
- 确保 CSS 文件放在 Express 配置的静态目录下（如
public/css/），然后统一用绝对路径：link(rel='stylesheet', href='/css/main.css') - 别用
../、./、~这类前缀——Pug 不处理它们，Node.js 也不会帮你映射到public - 部署到 Nginx 或 CDN 后路径变化？检查 Express 的
app.use(express.static('public'))是否生效，且路径前缀和 Nginxlocation配置一致
Pug 中内联 CSS 为什么没生效？
Pug 默认对所有块内容做 HTML 转义，style 标签里的 CSS 如果写成普通缩进块，会被当成纯文本输出，而不是可执行样式。
- 要用 unescaped 语法：
style: != '<style>body { background: ' + bgColor + '; }</style>' - 或者用 CDATA（更兼容）：
style: - 避免在
style块里写复杂逻辑，比如嵌套each或条件判断——容易破坏 HTML 结构，也难调试
如何按环境或页面动态引入不同 CSS？
硬编码路径在构建后会失效（比如 Webpack 输出 /css/app.a1b2c3.css），必须把最终 URL 提前算好传入模板上下文。
- 开发时用
/css/app.css，生产环境用哈希文件名？别靠process.env.NODE_ENV在 Pug 里拼接——变量未定义时 Pug 静默失败，不报错也不渲染 - 推荐做法：服务端读取
manifest.json（由webpack-manifest-plugin生成），把真实路径挂到res.locals.cssUrl，模板里直接用：link(rel='stylesheet', href=cssUrl) - 给兜底值，防变量为空：
link(rel='stylesheet', href=cssUrl || '/css/app.css')
真正麻烦的从来不是“怎么写”，而是路径怎么从构建产物映射到运行时 URL，以及变量在服务端未定义时 Pug 不报错的静默行为——这两点最容易卡人一整天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
