Pug + Express项目中CSS代码以纯文本显示问题求助

问题根因 #

• Pug模板语法错误：你在head中写的内嵌样式标签是styles（多了一个s），浏览器无法识别该自定义标签，会直接将内部的CSS内容作为普通文本渲染，这是CSS以纯文本展示的核心原因。
• Express静态资源路由配置错误：当前配置的路由前缀是相对路径../static，后续如果使用外链形式引入CSS/JS/图片资源时会匹配不到路径，无法加载静态资源。

修复步骤 #

1. 修正Pug模板语法 #

将index.pug中head部分的styles改为正确的style标签，同时注意保持缩进正确：

//- index.pug 修正后的head部分
doctype html
html
  head
    // 把原来的styles改成style，去掉多余的s
    style
      include ../static/style.css
  // 其余body部分代码保持不变

更推荐使用外链形式引入CSS，更符合项目规范，修改如下：

head
  link(rel="stylesheet", href="/static/style.css")
// 底部script标签也建议改为外链形式，避免同样的解析问题
script(src="/static/index.js")

2. 修正Express静态资源路由 #

修改Express服务代码中的静态资源配置项，将请求路径前缀改为绝对路径/static，同时用path.join处理静态文件夹路径避免跨平台兼容问题：

// 把原来的app.use('../static', express.static('static'))替换为下面的代码
app.use('/static', express.static(path.join(__dirname, 'static')))

3. 可选：修正CSS笔误 #

当前CSS代码中存在一处拼写错误，border: 2px solid bloack中的bloack改为black即可正常渲染边框。

修改完成后重启nodemon服务，样式即可正常渲染生效。

内容的提问来源于stack exchange，提问作者Mohd Afnan Alam