I'm facing an issue where CSS seems to be working fine for certain routes with node.js & express, but not for others. It's puzzling because the HTML file links to the same CSS file in both cases.
For instance, CSS works perfectly for the route "/feed", but fails to apply for "/users/:username". This is not an isolated incident and I am at a loss as to why this inconsistency exists. Any guidance on resolving this mystery would be greatly appreciated.
Let me provide a clearer illustration:
Index route (CSS functioning)
// @ROUTE: Home Route
// @DESCRIPTION: Renders the homepage
server.get('/', (req, res)=> {
filesDB.find({}).sort({createdAt: '-1'}).exec((err, data) => {
if(err) {
throw err
} else {
res.render('Home.ejs', {
pageTitle: "Feed :: ImgHub",
curSession: req.session,
images: data
})
}
})
})
/users/:username route (CSS not working)
// @ROUTE: User Route
// @DESCRIPTION: Renders all the posts that were uploaded by the selected user
server.get('/user/:username', (req, res)=> {
const username = req.params.username
filesDB.find({'uploader': username}).sort({createdAt: '-1'}).exec((err, data)=> {
if(err) {
throw err
} else {
res.render('User.ejs', {
pageTitle: `${username} :: ImgHub`,
curSession: req.session,
images: data
})
}
})
})
Express static file setup
server.use(express.static(__dirname + '/CSS'))
Just to clarify, there are no error messages showing up in the console log while browsing the website.