Using style sheets in ejs

Question:
Why is my stylesheet not working? It is the correct path and everything but it wont load.


Repl link:
https://replit.com/@linkadmin/LinkAdmin-Site#src/views/home.ejs

code snippet

Hey, @linkadmin welcome to the forums!

It may be a bad file path to the stylesheet. Can you try this path? ../../public/stylesheets/style.css

Yea it still does the same thing.

Hmm… Possibly ../public/stylesheets/style.css. I think we went back one too many directories

Still no luck.

In inspect this is the url its trying to get:

https://linkadmin-site.linkadmin.repl.co/public/stylesheets/style.css

Could it be something with my express static file serving?

Dont see any bugs on the issues tab of the GitHub repo. Unforetently I don’t have any more ideas and I don’t know Express. But I am sure somebody else here that knows Express can help you.

1 Like

Thank you for your time!

1 Like

I think you wanted to host this path:

app.use(express.static(path.join(__dirname, "src/public")));

Right now you are hosting this path:
(__dirname, "public")

You debugged the right path in console but you forgot src/ while hosting

Still wont work.
Path: …/…/public/stylesheets/style.css

Using src/public actually works; but since you’re hosting the folder called public and not a file, stylesheet is hosted at /stylesheets/style.css.

You might host it under public if you want the structure to be /public/stylesheet/style.css like:

app.use('/public', express.static(path.join(__dirname, "src/public")));

One more important thing to note:

When you’re in a html repl you are referring to the file structure of the actual program, like if you want to refer to a file which is two folders before you’ll use ../../ but when you’re hosting it, you’re the one who decides how the web structure will be. It no longer works like your folder structure unless you want it to.

In simpler terms:
Like you’re hosting index.html at root folder so when you want to call the stylesheet file, which is in the directory public/stylesheets/ (or just /stylesheets if you don’t want to host it under /public), you’ll call it like ./public/stylesheets/style.css. For a better understanding, just open the url https://linkadmin-site.linkadmin.repl.co/stylesheets/style.css and here’s your stylesheet file as of now.

It works now thank you!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.