CSS File Refuses to Link. Instead Refers back to html

user_10643571 0
Viewed 65

Something very weird happened. I was working on a react app and all was running well until today I came back to it and my css file was not linking for some reason. The only things I did were npm run build and npm run deploy.

In my html file I have this line of code: <link rel="stylesheet" href="styles.css" type="text/css">

YES my css file name is correctly spelled and YES it is in the same directory and leve as my index.html file. Still it is not being used. To test this further I put a css <script> into my head and it didn't work as well. Funny enough, the bootstrap that I'm using with a CDN seems to be working fine.

I put the same code in a jsfiddle and it works so it's not a problem with the code itself.

When I go to dev tools I see this:

enter image description here

The styles.css file is linking back to the index.html file

I have tried CTRL+SHIFT+R and clearing my chrome cache. I am very confused and would appreciate any help

EDIT: Opening the file from the path does serve the css file correctly as shown in the image below. enter image description here

EDIT: It's also probably worth noting that I was messing with using gulp to package this project into a single html file. I followed this tutorial: https://www.labnol.org/code/bundle-react-app-single-file-200514 exactly and when it didn't work I npm uninstalled all the gulp modules.

reactjs hyperlink css html
2 Answers

Try importing using JS using import './styles.css'

or moving the directory :)

user_121865270

I am not quite clear to your issue. But since you use reactjs, you should put public url to correctly link to the file:

<link rel="stylesheet" href="%PUBLIC_URL%/styles.css">

Note that I have not put ?v=1. Don't do this while developing. Otherwise, you will not get updated css, you'll get cached content.

user_21387520
Related