Express Node.js中EJS无法关联CSS文件问题求助

核心排查点及修复方案 #

• 确认静态资源目录配置匹配文件位置
  你当前配置的app.use(express.static(__dirname + "/website"))指定了website作为静态资源根目录，这意味着CSS文件必须放在这个文件夹下才能被Express识别。如果你的CSS和EJS视图文件在同一个目录，要么把CSS移动到website文件夹内，要么修改静态目录配置为EJS所在的文件夹，例如：

  // 假设EJS与CSS都在views目录下
  app.use(express.static(__dirname + "/views"));
  

• 修正EJS中CSS的引用路径
  在EJS文件里引用CSS时，必须使用基于静态目录的根路径，而非相对路径。比如CSS文件名为style.css，正确的引用方式是：

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

  不要使用./style.css这类相对路径，否则浏览器会基于当前页面URL去解析，容易出现路径错误。

• 验证静态资源的可访问性
  启动服务后，直接在浏览器地址栏访问http://localhost:你的端口号/style.css：

  • 如果能正常显示CSS内容，说明静态资源配置没问题，问题出在EJS的引用逻辑；
  • 如果访问失败，检查文件夹名称拼写、文件权限，或者是否有其他中间件（比如路由拦截）影响了静态资源的请求。

• 确认视图目录配置正确
  确保你设置的EJS视图目录没有和静态目录冲突，示例配置如下：

  const path = require('path');
  app.set('views', path.join(__dirname, 'views')); // 指定EJS所在目录
  app.set('view engine', 'ejs');
  

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