Live-server not loading css file

Question

I have a css file linked with my html file. My css isn't working when loading the html file through live-server.

The css works fine when opening the html file directly through the browser. I have my css file outside the directory where the html file is. When using live-server for my npm script as npm start, without any argument, it just shows all files of my workspace and the css works if I click on the directory where my html file is. But if I add the html file as the argument for live-server, it only loads the html file without any css changes.

html:

<link rel='stylesheet' type='text/css' href='../styles.css'>

package.json:

"start": "live-server home/index.html"

or

"start": "live-server home"

or

"start": "live-server home/index.html && styles.css"

all have the same results. Only

"start": "live-server"

works, which shows the working directory on the browser. I click the home directory and then the html file loads with the css.

When typing npm start from the terminal, my html file loads fine on my browser, but for some reason the linked css file isn't loaded. The css link code should be fine since it works correctly when opening directly from the browser. Does the css file needs to be in the same directory?

Answer 1

Please check the link tag attributes and it's values are properly spelled. text\css will never load css file. The correct is text/css (it's forward slash). Also try to open the html file from file explorer and check if it's working.

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

Answer 2

I was able to get it to work by reinstalling the live server extension on vscode. Hope this helps!