How to add a separate CSS file for each view in ejs

Question

I am want to add a separate CSS file for each view in ejs

this is my project tree:

My-App
├─ app.js
├─ package-lock.json
├─ package.json
├─ public
│  └─ css
│     └─ style.css
└─ views
   ├─ header.ejs
   ├─ view1.ejs
   ├─ view2.ejs
   ├─ view3.ejs
   └─ footer.ejs

All of these views are styled by only one file which is style.css. I link this CSS file in header.ejs as follows:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <title>XXXXXX</title>
</head>

<body>
    <div class="main-container">
    <div class="left-menu">

        <form action="/" method="post">
        <div class="left-menu-list">

            <button class="btn" name="leftBtn" value="XXX1" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX2" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX3" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX4" type="submit">XXX</button>

        </div>
    </form>
    </div>

and of course in each view I do the following

<%- include("header") -%>

<!-- the view content -->

<%- include("footer") -%>

what I do want is to do something like <link rel="stylesheet" href="../css/view1Style.css" type="text/css"> in each view file

Tasmia A. · Accepted Answer · 2022-09-22 03:55:36Z

Instead of using two partials, use three. Put all similar body code in another partial.

//menu.ejs

<div class="main-container">
    <div class="left-menu">

        <form action="/" method="post">
        <div class="left-menu-list">

            <button class="btn" name="leftBtn" value="XXX1" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX2" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX3" type="submit">XXX</button>

            <button class="btn" name="leftBtn" value="XXX4" type="submit">XXX</button>

        </div>
    </form>
    </div>

Then change other view structure like this:

  <%- include("header.ejs") -%>
  <!-- Add your separate css files here -->
  <link rel="stylesheet" href="../css/view1Style.css" type="text/css">
 </head>

 <body>
   <%- include("menu.ejs") -%>
   <!-- the view content -->
   <%- include("footer.ejs") -%>
   <!-- You can also add separate script files here -->
 </body>
</html>

Collectives™ on Stack Overflow

How to add a separate CSS file for each view in ejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related