Express/Node.js/EJS项目中使用不同样式表时解决‘style未定义’报错的方法

别担心，刚上手Express的时候遇到这种变量传递的小问题太正常啦！咱们一步步来搞定它：

1. 直接传递字符串值（最核心的修复） #

你现在代码里写的res.render('mySite', { style: mySite });里，mySite是一个未定义的变量——JavaScript根本不知道它是什么，所以才会抛出style is not defined的错误。

你需要的是把样式表的文件名（不带.css后缀）以字符串的形式传进去，修改成这样：

app.get('/mySite', (req, res) => {
  res.render('mySite', { style: 'mySite' }); // 这里把mySite用引号包起来，变成字符串
});

这样EJS模板里的<%=style%>就会被替换成mySite，最终渲染出正确的样式链接：<link rel="stylesheet" type="text/css" href="/stylesheets/mySite.css">

2. 确认静态资源目录配置 #

还要确保你的Express项目已经正确设置了静态文件服务，不然浏览器会找不到mySite.css文件。在app.js里添加（如果还没加的话）：

// 假设你的stylesheets文件夹放在项目根目录的public文件夹下
app.use(express.static('public'));

对应的项目结构应该是这样的：

你的项目/
├── app.js
├── views/
│   ├── boilerplate.ejs
│   └── mySite.ejs
└── public/
    └── stylesheets/
        └── mySite.css

3. 可选：处理无样式的视图（避免报错） #

如果有些视图不需要单独的样式表，你可以在EJS模板里加个条件判断，防止出现空的链接：

<% if (typeof style !== 'undefined') { %>
  <link rel="stylesheet" type="text/css" href="/stylesheets/<%=style%>.css">
<% } %>

这样当你不传style变量时，这段链接就不会被渲染出来，也不会报错。

扩展：给多个视图传不同样式 #

如果后续有其他页面需要单独样式，比如about页面，只需要在对应的路由里传对应字符串就行：

app.get('/about', (req, res) => {
  res.render('about', { style: 'about' });
});

同时在public/stylesheets/下创建about.css就可以啦！

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