Live-server not loading CSS

Question

I have a CSS file linked with my HTML file.
The CSS doesn't load 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 having live-server in my npm script, starting it with npm start, without any argument, it just shows all files of my workspace and the CSS works if I click on the directory where the main index.html is.
But if I add the path as an argument in the npm script, it only loads the HTML file without any CSS.

The link in the HTML file, index.html :

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

In package.json :

"start": "live-server home"

The above doesn't load the CSS. Only

"start": "live-server"

works, which shows the working directory in 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 in my browser, but for some reason, the linked CSS file isn't loaded.
The CSS link should be fine, since it works correctly when opening directly from the browser.
Does the CSS file need to be in the same directory?

Carcanet

You have to include your styles in src/angular.json file under "styles" object – Gouge

@Gouge I'm not using Angular. – Carcanet

Then please explain what stack are you using and how are you running the server using npm if it's not angular. – Gouge

@Gouge None. I decided to not use React for this website. That's why I'm using live-server instead of doing the React's built in npm start. I might just put the html files and css file in the same directory if there's no better way. – Carcanet

Answer 1

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

Hecht

thanks for the solution worked for me. I was using windows and then I just added the command live-server 'foldername' – Scibert

Answer 2

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" />

Cayuga

Everything works in production. Just not on live-server. – Carcanet

Why was this answer upvoted? The asker clearly states that The css works fine when opening the html file directly through the browser. – Cloe

Answer 3

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

Checkered

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.

Partite

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!!

Mannino

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...😉

Committal

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Blinnie

Answer 7

Try http://127.0.0.1:8080 in some other web browser!

In my case, the CSS suddenly stopped loading in my default web browser.
It loaded fine in all other browsers, including Google Chrome and Mozilla Firefox.
The Chromium browser I want to have as my default was the only one that failed.
The solution was to create a fresh user profile in the Chromium browser.

With the failing web browser as default (having a bad user profile), here is the error/failure message from live-server :

Ready for changes
GET /css/style.css/ 404 4.933 ms - 153

Admittedly, the last forward slash indicates that live-server sees /css/style.css/ as a directory rather than a file. Still, my solution was to just make sure I have a good/fresh user profile in my default browser.

Your case is different, though

Your project tree looks as follows :

.
├── home
│   └── index.html
├── package.json
└── styles.css

where I've disregarded package-lock.json and the node_modules folder, along with any other folders containing for example images and/or JavaScript files.

As usual, I install live-server globally, npm i live-server -g. Then, from the command line, I run live-server, which opens http://127.0.0.1:8080 in my default web browser. I can confirm what you've reported – that this makes the browser display my folder structure,

and that the HTML file displays with CSS as soon as I click the home directory.

Running live-server --help, shows the option [--open=PATH].
Running live-server --open=home opens http://127.0.0.1:8080/home/, again with CSS.

Finally – having "scripts": { "start": "live-server --open=home" }, in package.json and then running npm start – also loads both HTML and CSS properly. ¹

---

¹ And yes – having "scripts": { "start": "live-server home" }, in package.json without the --open=[PATH] clause, npm start opens http://127.0.0.1:8080 without the /home/ suffix. For some reason that I don't quite understand, it opens index.html which we know is in the home folder – not in the root directory.

Toft