How to Properly Load CSS Stylesheets in Node, Express, and EJS Applications?

Embedding CSS into Node, Express, and EJS Applications

Many developers struggle to load CSS stylesheets into their web applications built using Node, Express, and EJS. This article provides a comprehensive solution to this common issue.

Problem Statement:

Despite following documented instructions, users continue to encounter difficulties loading CSS files. The styles.css file remains inaccessible, and the developer tools indicate that the element's type is set to 'text/html' rather than 'text/css'.

Solution:

To resolve this issue, modify the express.static middleware in your app.js file to the following:

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

This ensures that the static files are served from the public directory at the root of the project.

CSS Inclusion in EJS:

After configuring the middleware, you can include the CSS file in your EJS template as follows:

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

Note that you should not include a leading forward slash (/) before the CSS filename. This is crucial for the browser to correctly identify and load the stylesheet.

By implementing these changes, you can seamlessly incorporate CSS stylesheets into your Node, Express, and EJS applications.

The above is the detailed content of How to Properly Load CSS Stylesheets in Node, Express, and EJS Applications?. For more information, please follow other related articles on the PHP Chinese website!