How can I include a seperate CSS file from an ejs that borrows from a layout.ejs file?

I have a layout.ejs file that provides the basic layout of every page that I have for my node application. This includes some basic CSS files (i.e bootstrap). I have other ejs files that have their body rendered using that layout.ejs file but I also want them to be able to include their own CSS files for some custom styles.

I've tried to include the CSS directly in the other ejs files but that just sets the css file in the body of the html. I have thought about using a javascript file that injects the CSS file client-side but this feels too 'hacky' for me.

Currently, my test layout (the one that inherits from layout.ejs) looks essentially like this:

<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>

As I said, all I have is a css attached to the body of the html and not in the header so everything keeps the default style as the layout.ejs file. Is there a way I can achieve this by finding a way to get different routes to use the basic layout css files but allow for some variation using their own css?

Solution

I found a method to do this. All it takes is to have a variable passed into the template ejs that is an array of URIs to your css files. The ejs then loops through the array and creates the template with the required css files.

Here's the code for passing through the css files:

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

And then on the template, all you have to do is:

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

Now all the sheets you need for a route can be passed on. A bit of code refactoring is necessary to replace having to add the links manually but you can get the essence of it.

EDIT: This requires some setup to serve static files. You can do this by including this in your express application:

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