CSS stylesheet not found on server?

Question

I'm using react/webpack to run a development server on local 8080. This is something I don't quite understand yet and I've run into this problem before. Bootstrap is being linked in the HTML and is running fine. However, when I link the stylesheet, the console is giving me an error of 404 not found for my stylesheet.

Here is my HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
  <div id="root">

  </div>
</body>
</html>

Index.html and Index.js are at the root level, and so is the /Public directory, which only contains one file: stylesheet.css.

Why is stylesheet.css not loading in the browser when I run the local server and how do I fix this? Thanks.

did you try Public/stylesheet.css ? (capital P) - some servers (looking at you IIS) are case sensitive — blurfus
– blurfus, Commented Oct 21, 2016 at 17:33
Thank you! I had tried public before as you can see in the example above, however the Public directory wasn't in the TRUE root of the project. It was inside the App directory. I moved the Public directory one level out to the true root (with the webpack configs and the node modules) and it worked! — user7024499
– user7024499, Commented Oct 21, 2016 at 17:36
Is there a reason why this works btw? Does the browser just expect the Public folder to be in the very true root directory? — user7024499
– user7024499, Commented Oct 21, 2016 at 17:36
I am not sure about the inner workings of webpack but the browser does not 'expect' anything. The browser goes looking for a file where you tell it is found; in this case: <application_root>/public/stylesheet.css or in a remote server's location, like: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css - updated: public in this case is defined as a directory at the same level as the html file. — blurfus
– blurfus, Commented Oct 21, 2016 at 17:38

ceridian · Accepted Answer · 2016-10-21 17:46:21Z

2

if your sharing out the public folder with express like so

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

then you do not need to have 'public' in the source.

in other words this

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

should be this

<link rel="stylesheet" href="/stylesheet.css" />

answered Oct 21, 2016 at 17:46

ceridian

511 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

CSS stylesheet not found on server?

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