css file is not found

Question

i get a 404 ( net::ERR_ABORTED 404) error when rendering on the github.io. For some reason it’s not seeing the stylesheet.css. localhost works just fine. I moved the link inside the index.html, but it didn’t help. Any thoughts?enter image description here

enter image description here

{
  "name": "js_project_skeleton",
  "version": "1.0.0",
  "description": "skeleton for new JS project",
  "main": "index.js",
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ],
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "webpack:watch": "webpack --watch --config webpack.dev.js",
    "webpack:build": "webpack --config webpack.prod.js  --optimize-minimize"
  },
  "author": "mrcjbradley",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/preset-env": "^7.6.3",
    "autoprefixer": "^9.6.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "fibers": "^4.0.1",
    "file-loader": "^5.0.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass": "^1.23.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  }
}

Does this answer your question? [JS file gets a net::ERR\_ABORTED 404 (Not Found)](https://stackoverflow.com/questions/54173476/js-file-gets-a-neterr-aborted-404-not-found) — Kundan, Jun 23 '20 at 02:27

score 0 · Answer 1 · answered Jun 23 '20 at 02:21

0

try ./src/styles/stylesheet.css or src/styles/stylesheet.css

answered Jun 23 '20 at 02:21

Marik Ishtar

2,899
1
13
27

score 0 · Answer 2 · answered Jun 23 '20 at 02:33

You need a way to send your static files to the client. This can be achieved with a reverse proxy like Nginx, or simply using express.static().

Put all your "static" (css, js, images) files in a folder dedicated to it, different from where you put your "views" (html files in your case). I'll call it styles for the example. Once it's done, add this line in your server code:

app.use("/styles", express.static('./styles/'));

This will effectively serve every file in your "styles" folder via the /styles route.

Querying your stylesheet.css file in the client thus becomes:

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

css file is not found

2 Answers2