How to Properly Include CSS Files in Node.js, Express, and EJS Projects?

Including CSS Files in Node, Express, and EJS Applications

When working with Node.js, Express, and EJS, you may encounter difficulties including CSS files in your project. This issue arises when the CSS file's type is incorrectly set as 'text/html' instead of 'text/css' in the developer's console.

To resolve this issue, follow these steps:

In the server.js file:

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

This line ensures that static files, including CSS, are served from the 'public' directory.

In the EJS file:

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

Notice that you do not need to include a leading slash '/' before the 'css' directory.

Explanation:

• Including the '/public' directory as the static files path ensures that CSS files are served correctly.
• Specifying the correct CSS file path in EJS prevents errors in loading the stylesheet.

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