I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS file and display correctly, except for one specific hbs file.
Here is an overview of my folder structure:
┣ 📂public
┃ ┣ 📂css
┃ ┃ ┗ 📜style.css
┣ 📂src
┃ ┣ 📂controllers
┃ ┣ 📂routes
┃ ┗ 📜server.js
┣ 📂views
┃ ┣ 📂auth
┃ ┃ ┣ 📜login.hbs
┃ ┃ ┗ 📜register.hbs
┃ ┣ 📜home.hbs
┃ ┗ 📜taskList.hbs
┣ 📜.env
┣ 📜package-lock.json
┗ 📜package.json
In my 'server.js' file, I have correctly set up serving static files like so:
app.use(express.static(pathToMyPublicFolder))
All HBS files in the 'views' folder include a reference to the stylesheet, and the CSS is rendering properly:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
The head section is identical in 'taskLists.hbs', yet the CSS is not taking effect. I even tried duplicating the header with no luck. There are also no errors related to the CSS link visible in the console.
If more code snippets or details on how I'm rendering each page would be helpful, please feel free to ask. Appreciate any assistance in advance.