如何从从 layout.ejs 文件借用的 ex 中包含一个单独的 CSS 文件？答案

【问题标题】：How can I include a seperate CSS file from an ejs that borrows from a layout.ejs file?如何从从 layout.ejs 文件借用的 ex 中包含一个单独的 CSS 文件？
【发布时间】：2026-02-17 16:10:01
【问题描述】：

我有一个 layout.ejs 文件，它为我的节点应用程序提供了每个页面的基本布局。这包括一些基本的 CSS 文件（即引导程序）。我有其他 ejs 文件，它们的主体使用该 layout.ejs 文件呈现，但我也希望它们能够为某些自定义样式包含自己的 CSS 文件。

我尝试将 CSS 直接包含在其他 ejs 文件中，但这只是将 css 文件设置在 html 的正文中。我曾考虑过使用在客户端注入 CSS 文件的 javascript 文件，但这对我来说太“hacky”了。

目前，我的测试布局（继承自 layout.ejs）看起来基本上是这样的：

<head>
    <link href="../public/styles/index.css" rel="stylesheet" type="text\css">
</head>
<section id="box-section" class="blox-mf route">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box text-center">
            <h3 class="title-a">
              Title2
            </h3>
            <p class="subtitle-a" style="color: #be3131;">
                Subtitle 2
            </p>
            <div class="line-mf"></div>
          </div>
        </div>
      </div>
    </div>
</section>

<script src="/scripts/index.js" crossorigin="anonymous"></script>

正如我所说，我所拥有的只是一个附加到 html 正文而不是标题中的 css，因此所有内容都保持默认样式作为 layout.ejs 文件。有没有一种方法可以通过找到一种方法来获得不同的路线来使用基本布局 css 文件但允许使用他们自己的 css 进行一些变化？

【问题讨论】：

标签： node.js express ejs

【解决方案1】：

我找到了一种方法来做到这一点。所要做的就是将一个变量传递给模板 ejs，它是一个指向您的 css 文件的 URI 数组。然后 ejs 循环遍历数组并使用所需的 css 文件创建模板。

这是通过css文件的代码：

myCss.push({
    uri: 'public/styles/index.css'
})
res.render('./home', {
    styles: myCss,
});

然后在模板上，你所要做的就是：

<% for(var i=0; i < styles.length; i++) { %>
    <link href="<%= styles[i].uri %>" rel="stylesheet"  type="text/css">
<% } %>

现在您可以传递路线所需的所有工作表。需要进行一些代码重构来代替手动添加链接，但您可以了解它的精髓。

编辑：这需要一些设置来提供静态文件。您可以通过将其包含在您的快速应用程序中来做到这一点：

app.use(express.static(__dirname + '/public'));

【讨论】：