For some reason, only the CSS styles for my footer are rendering on my ejs file. The rest of my CSS doesn't render at all. I've tried defining the path of my static files to my views directory using the path method:
app.use(express.static(path.join(__dirname, 'public')));<link href="/styles/main.css" rel="stylesheet" type="text/css">CODES:
index.js:
import express from "express";
import bodyParser from "body-parser";
import axios from "axios";
// Other code snippets like setting up API_URL, importing modules etc.
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'htm'], 'index': false, 'maxAge': '1d', 'setHeaders': (res, path, stat) => { res.set('Content-Type', 'text/css'); } }));
app.use(express.static(path.join(__dirname, 'public')));
// App routes
app.listen(port, () =>{
console.log(`Server is running on ${port}`);
});
main.css:
body {
background-color: red;
}
footer {
color: green;
}
header.ejs:
Add content here.
index.ejs:
Add content here
footer.ejs:
Add content here
Facing issues with CSS rendering as only the footer styles are applied while others get cancelled. Screenshots can be found below:
Please help me troubleshoot this long-standing issue. Appreciate any assistance. Thank you!