如何为EJS中的每个视图添加独立的CSS文件

这里有两种简单可行的方案，你可以根据自己的习惯选择：

方案1：在include公共header时传递局部变量（推荐） #

这种方式让每个视图自己决定要加载的独立CSS，不需要修改路由逻辑，灵活性更高。

步骤1：修改header.ejs，预留独立CSS的插入位置 #

把原来的<head>部分调整，添加一个判断逻辑：如果有传入页面专属的CSS路径变量，就渲染对应的<link>标签。同时建议把全局CSS的路径改成绝对路径，避免路由层级变化导致路径错误：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 全局公共CSS（改用绝对路径，适配所有路由层级） -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- 页面独立CSS的插入位 -->
<% if (typeof pageCss !== 'undefined') { %>
  <link rel="stylesheet" href="<%= pageCss %>" type="text/css">
<% } %>
<title>XXXXXX</title>
</head>
<!-- header原有内容保持不变 -->

步骤2：在每个视图中传递独立CSS路径 #

比如在view1.ejs里，include header时直接传入该页面的专属CSS路径：

<%- include("header", { pageCss: "/css/view1Style.css" }) -%>
<!-- view1的自定义内容 -->
<%- include("footer") -%>

同理，view2.ejs就传/css/view2Style.css，以此类推。

方案2：通过路由渲染时统一传参 #

如果希望由路由来管理页面的CSS依赖，可以在渲染视图时把CSS路径作为参数传给模板：

步骤1：修改header.ejs（和方案1的header代码一致） #

同样保留全局CSS和独立CSS的判断逻辑，代码参考方案1的header部分。

步骤2：在app.js的路由中传递参数 #

比如你的路由可以这样写：

app.get('/view1', (req, res) => {
  res.render('view1', { pageCss: '/css/view1Style.css' });
});

app.get('/view2', (req, res) => {
  res.render('view2', { pageCss: '/css/view2Style.css' });
});

此时视图里正常include header即可，不需要额外传参：

<%- include("header") -%>
<!-- 视图内容 -->
<%- include("footer") -%>

额外扩展 #

如果某个页面需要加载多个独立CSS，可以把变量改成数组，再在header里循环渲染：

<!-- header里的循环逻辑 -->
<% if (typeof extraCss !== 'undefined' && Array.isArray(extraCss)) { %>
  <% extraCss.forEach(cssPath => { %>
    <link rel="stylesheet" href="<%= cssPath %>" type="text/css">
  <% }) %>
<% } %>

然后在视图里传入数组：

<%- include("header", { extraCss: ['/css/view1Style.css', '/css/another-custom.css'] }) -%>

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