Why is My CSS File Not Loading in My Node.js, Express, and EJS Application?

including CSS Files with Node, Express, and EJS

An issue has been encountered while attempting to load the styles.css file as per the instructions provided in the Stack Overflow thread. Despite declaring the static middleware in app.js and referencing the CSS file in the EJS template, the CSS file fails to load.

Upon inspecting the developer console, it was discovered that the type attribute of the link element is set to 'text/html' rather than 'text/css'. This inconsistency might prevent the CSS file from being applied correctly.

To resolve this issue, make the following modifications:

1. Modify the static middleware declaration in server.js:

<code class="js">app.use(express.static(__dirname + '/public'));</code>

2. Adjust the CSS file reference in the EJS template:

<code class="ejs"><link rel="stylesheet" type="text/css" href="css/style.css"></code>

By making these changes, the static middleware will provide access to the public directory, where the styles.css file is located. Additionally, the CSS file reference in the EJS template should exclude the leading slash ('/'), as this can cause issues when the application is not running on the root URL.

The above is the detailed content of Why is My CSS File Not Loading in My Node.js, Express, and EJS Application?. For more information, please follow other related articles on the PHP Chinese website!