How to Include CSS Files Using Node, Express, and Ejs

adding .css file to ejs

Your problem is not actually specific to ejs.

2 things to note here

1. style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.

2. In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image

it can be done by

app.use(express.static(__dirname + '/public'));

assuming you put the css files in public folder from in your app root.
now you have to refer to the css files in your tamplate files,
like

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

Here i assume you have put the css file in css folder inside your public folder.

So folder structure would be

.
./app.js
./public
    /css
        /style.css

How can I include css files using node, express, and ejs?

Use this in your server.js file

app.use(express.static(__dirname + '/public'));

and add css like

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

dont need / before css like

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

Adding CSS to EJS

You specified that the static files (css, images, etc) are on the folder "public" :

app.use(express.static(__dirname + 'public'));

Read : http://expressjs.com/en/starter/static-files.html

Just move your css on this folder ;)

edit :

You can specify multiple static folder :

app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));

But you can add folders in your static folder :

• /public1/css
• /public1/lib

and use it like that in your ejs file :

<link rel="stylesheet" href="/public1/css/index.css">

How can I include a seperate CSS file from an ejs that borrows from a layout.ejs file?

I found a method to do this. All it takes is to have a variable passed into the template ejs that is an array of URIs to your css files. The ejs then loops through the array and creates the template with the required css files.

Here's the code for passing through the css files:

myCss.push({
    uri: 'public/styles/index.css'
})
res.render('./home', {
    styles: myCss,
});

And then on the template, all you have to do is:

<% for(var i=0; i < styles.length; i++) { %>
    <link href="<%= styles[i].uri %>" rel="stylesheet"  type="text/css">
<% } %> 

Now all the sheets you need for a route can be passed on. A bit of code refactoring is necessary to replace having to add the links manually but you can get the essence of it.

EDIT:
This requires some setup to serve static files. You can do this by including this in your express application:

app.use(express.static(__dirname + '/public'));

Using different stylesheets in express/ node/ ejs application - style not defined

OK, I learned that it can be done via appropriate reference to style in the route, while in the boilerplate there must be an ejs syntax for style reference

Can't get stylesheet to work with ejs for node.js

Declare a static directory:

app.use(express.static(__dirname + '/public'));

<link rel='stylesheet' href='/style.css' />

---

Related Topics