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!

Answer 3

The reason this happens we can see from the live-server docs:

The server is a simple node app that serves the working directory and its subdirectories.

If a file is stipulated instead of a directory, or the directory does not contain the assets to be loaded by live-server, it will result in a 404. However, in the default settings for live-server, in the event of a 404, it will default to trying to read index.html which causes a MIME type error that it is trying to load "text/html" for many people facing this confusion.

In general, when using live-server, try to create a public or dist directory that you plan to hold all your static content. Here is an example directory structure that is compiling typescript to a dist/js directory and sass to a dist/css directory:

.
├── dist
│   ├── css
│   │   └── index.css
│   ├── index.html
│   └── js
│       └── index.js
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts
│   └── sass
│       └── main.scss
└── yarn.lock

You can then run "live-server dist" -- the key factor being I'm not asking live-server to look outside of the directory it is serving.

Here is the live-server documentation for more information about configuration options

Answer 4

I had to provide live-server with the full path to my CSS:

<link rel="stylesheet" type="text/css" href="http://localhost:8888/login/css/bootstrap.min.css" />

I don't know why but this fixed it.

note: in the example here I show the path to bootstrap, but the same thing applies to my custom css file too.

Answer 5

in VS Code, right-click on style.css and select "copy relative path", and paste it in link tag href="style.css", don't try to link by selecting an external path or type manually, worked for me on the spot as I was going through to find the solution for the same issue but I did not find any, tried just this to as a last try before I go to bed!!

Answer 6

i had the problem and i got solution from a you tube video. Whatever, the soution is dont put the whole path of css in the link. Just copy the css file name like "style.css" and put that in your href...it simple...