Something strange has occurred. I was working on a React app and everything was functioning properly until today when I returned to it, and my CSS file wasn't linking for some reason. The only actions I took were running npm run build and npm run deploy.
In my HTML file, I have the following line of code:
<link rel="stylesheet" href="styles.css" type="text/css">Yes, the name of my CSS file is spelled correctly, and yes, it is in the same directory and level as my index.html file. However, it is not being utilized. To further test this, I added a CSS <script> tag to my head, but it also didn't work. Interestingly, the Bootstrap that I'm using through a CDN is working fine.
I copied the same code into a JSFiddle, and it worked there, so it doesn't seem to be an issue with the code itself.
When I inspect dev tools, I noticed something peculiar:
https://i.stack.imgur.com/s9s3s.png
The styles.css file seems to be linking back to the index.html file
I tried pressing CTRL+SHIFT+R and clearing my Chrome cache, but I'm still puzzled and would appreciate any assistance.
EDIT: When opening the file from the path directly, the CSS file does serve correctly, as shown in the image below. https://i.stack.imgur.com/rb4r3.png
EDIT: It's worth mentioning that I tinkered with using gulp to package this project into a single HTML file. I followed this tutorial exactly: . When it didn't work, I uninstalled all the gulp modules by using npm uninstall.