My CSS files are not loading properly. When I inspect the element (F12) and go to Networks, my CSS file is not visible. I have added the middleware:
app.use(express.static(path.join(__dirname, '/public')));
and required the path above it.
I have added the middleware, required it, and npm installed it as well.
This is my Folder Structure:
-app.js
-package.json
-package-lock.json
-node_modules
-public
-stylesheets
-main.css
-views
-index.ejs
-partials
-header.ejs
-footer.ejs
The Header.ejs file contains this code and the body contains some text.
<link href="/stylesheets/main.css">
var express = require('express');
var request = require('request');
var ejs = require('ejs');
var path = require('path');
var app = express();
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, '/public')));
The CSS file changes the color of the background. The index.ejs file calls the header and footer accordingly.
<% include partials/header%>
This is my CSS code:
body{
background-color: purple;
text-align: center;
}
Although there are no errors shown in the Chrome console, I am still unable to load my CSS properly. Thank you in advance for your assistance.