Live-server not loading css file

html css npm package.json npm-live-server
VoidChips picture VoidChips · Jun 28, 2019 · Viewed 9.1k times · Source

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

Rajdeep Debnath picture Rajdeep Debnath · Sep 6, 2019

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

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More