css not loading even though there're no errors and it's linked correctly in ejs

Question

so, I'm trying to link a css file to an ejs file but it's not working, and I think I'm linking them correctly:

<head>
<title>Acres & Karats Calculator</title>
<base href="/">
<link type="text/css" href="css/Acres and Karats Calculator.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap" rel="stylesheet">

and i specified the public directory to be used in express:

let express = require("express"),
    app     = express();

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

app.get("/", (req, res) => {
    res.render("Acres and Karats Calculator.ejs")
});

app.listen("3000", () => {
    console.log("Server started!");
});

and there are no errors in the console at all and the css is not loaded

file structure:

app.js
views
- pubilc
  - css
    - Acres and Karats Calculator.css

Agreed, generally spaces aren't a good idea in file names. Try replacing spaces with underscores (_) or something similar. Acres_and_Karats_Calculator.css. — sallf
– sallf, Commented Feb 14, 2020 at 17:13
I tried replacing them with underscores but nothing happened — pers0n
– pers0n, Commented Feb 14, 2020 at 17:18

pers0n · Accepted Answer · 2020-02-14 17:57:26Z

1

I solved it by adding rel="stylesheet" and adding a / before the file path

answered Feb 14, 2020 at 17:57

pers0n

15510 bronze badges

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

Comments

antonku · Accepted Answer · 2020-02-14 17:33:21Z

0

Taking into account the directory layout of your project:

app.js
views
-|_pubilc
---|_css
-----|_Acres and Karats Calculator.css

and the link to the css file in the ejs template:

<link type="text/css" href="css/Acres and Karats Calculator.css">

express static path in your app.js should be updated as follows:

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

answered Feb 14, 2020 at 17:33

antonku

7,7252 gold badges18 silver badges22 bronze badges

1 Comment

pers0n Over a year ago

That didn't work, tried restarting the server and all, but didn't work

Collectives™ on Stack Overflow

css not loading even though there're no errors and it's linked correctly in ejs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related