如何在 ejs 视图中渲染 css？

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

Answer 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">