How to render css in ejs views?

Question

I have the following folder structure:

|——-index.js
├── public
│   └── css
│       └── styles.css
├── routes
│   ├── index.routes.js
│   └── users.routes.js
└── views
    ├── login.ejs
    ├── profile.ejs
    └── register.ejs

In my index.js file I'm setting up the source for my stylesheets to /public:

app.use(express.static("public"));
app.set("view engine", "ejs");

My login router is /users/login and that endpoint is rendering my view page login.ejs.

In login.ejs I'm importing the stylesheet as follows:

<!-- bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

<!-- stylesheet -->
    <link href="css/styles.css" type="text/css" />

Unfortunately, the css is not being rendered and I can't seem to add any styling to my view page. Am I importing it incorrectly? Is it a problem with the nested directory

You can do some checking that we can't do for you: view-source your page and see if the link tag is there. If it is, open dev tools, open the network tab, and reload your page: does the css file load at all? (and remember to put the result of those investigations into your post). And on a technical note, css is not "rendered", but it is "applied". That's a bit pedantic, of course, but it's always important to use the right words when you have a technical problem. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jul 12, 2021 at 17:16
Thanks for your response. It seems that the link tag is there, but the css file is not loading. I have a feeling it has to do with the way I'm trying to apply* it. — user7496931
– user7496931, Commented Jul 12, 2021 at 17:27

Anupreet Kaur · Accepted Answer · 2021-07-12 17:33:55Z

1

Try importing the css like this in head tag-

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/styles.css">

answered Jul 12, 2021 at 17:33

Anupreet Kaur

465 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render css in ejs views?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related