title: problems with ejs includes and partials
body: <p>I'm trying to make a dynamic include using ejs, but my css is working only on the main page (mainPage.ejs), but not on the login page (loginPage.ejs). My folders are organized as follows:</p>
  <p><a href="https://i.stack.imgur.com/0Jn8J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Jn8J.png" alt="enter image description here" /></a></p>
  <p>app.js below</p>
  <pre><code>require('dotenv').config();
  const express = require('express');
  const app = express();
  const path = require('path');
  const mongoose = require('mongoose');
  const helmet = require('helmet');
  const routes = require('./src/routes/routes');
  
  mongoose.connect(process.env.DATABASE_KEY, {useNewUrlParser: true, useUnifiedTopology: true})
      .then(() =&gt; {
          console.log('Connected to the database');
          app.emit('ready');
      })
      .catch((err) =&gt; console.log(err));
  
  //app.use(helmet());
  app.use(express.urlencoded({ extended: true}));
  app.use(express.json());
  
  app.set('views', './src/views');
  app.use(express.static('public'));
  app.set('view engine', 'ejs');
  
  app.use(routes);
  
  app.on('ready', () =&gt; {
      app.listen(3000);
  })
  </code></pre>
  <p>Here is my head.ejs</p>
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      
      &lt;head&gt;
          &lt;!-- Required meta tags --&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
              integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
          &lt;title&gt;Home&lt;/title&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
  </code></pre>
  <p>loginPage.ejs</p>
  <pre><code>&lt;%- include('./includes/head')%&gt;
  &lt;div class=&quot;test&quot;&gt;
      don´t work
  &lt;/div&gt;
  &lt;%- include('includes/footer')%&gt;
  </code></pre>
  <p>As I said, css is only working on mainPage.ejs, and there the includes were imported as follows:</p>
  <pre><code>&lt;%- include('./includes/head')%&gt;
    ...html
  &lt;%- include('includes/footer')%&gt;
  </code></pre>
  <p>In loginPage.ejs the css for some reason is not working even though the includes are exactly the same as the mainPage. I tried to see if the problem was in some configuration made in app.js, but I still couldn't solve it.</p>