0

Super simple question, but this is not working for me. I have googled it, but for some reason, I am not sure. I am trying to render my CSS styling in my index.ejs file (essentially my index.html)

My stylesheet is located in Base Directory > public > css > stylesheet.css and my index.ejs file is located in Base Directory > views > index.ejs

This is currently how I am trying to pull in my stylesheet in my index.ejs:

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

Is there anything wrong with this approach?

Edit: Using href= "../public/css/stylesheet.css" and CMD+click I am able to go to the stylesheet, so the syntax above must be correct... but it is not rendering

Note: I am also using express

KyleUSA
  • 161
  • 1
  • 1
  • 9

3 Answers3

0

It should not be with respect to the HTML file and not the base directory

<link rel="stylesheet" type="text/css" href= "../public/css/stylesheet.css" />
Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
0

Try using

href="../public/css/stylesheet.css"

. Most probably your href is searching for the stylesheet.css in the public/css/stylesheet of the current directory (which doesn't exist) instead of Base Directory

stravo1
  • 1
  • 1
  • Nope, that doesn't work either. Using `href= "../public/css/stylesheet.css" ` and CMD+click I am able to go to the stylesheet, so the syntax above must be correct... but it is not rendering... – KyleUSA Feb 07 '21 at 00:21
  • can you make sure that the css file is being loaded in the browser? check the `Resources` and `Network` tabs under the dev tools of your browser and see if you can locate the css file. – stravo1 Feb 07 '21 at 00:30
  • Ah... I assume this is the issue `Refused to apply style from 'http://localhost:3000/public/css/stylesheet.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.` – KyleUSA Feb 07 '21 at 00:31
  • Checkout [https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type] – stravo1 Feb 07 '21 at 00:40
0

Using /css/stylesheet.css worked.

Becuase I am using

app.use(express.static(join(__dirname, 'public')));

In my express file, the href already includes /public

KyleUSA
  • 161
  • 1
  • 1
  • 9