Can't load external css when in localhost

问题

I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.

The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css

However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?

Heres how im loading in my css

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

Here is how my file structure looks

Here is my main.css file inside the css folder

my main.css file is within the css folder, i am working off of the interface.html file

回答1:

Try this instead:

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

notice the ./ in front of the href

otherwise include full path name:

<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">

回答2:

this is what i have tried and it is working for me

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

thanks

回答3:

The relative path kicks off from your html path so

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

should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"

回答4:

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

The function signature is: app.use(express.static(__dirname));

Then you can include like bellow

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

回答5:

I was facing same problem as you are facing but i tired below code and it works.

body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}

<html>
<head>
 <link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p> 
</body>
</html>

Thanks, hope it will help you......

回答6:

I'm also facing this problem... But I found a solution and its working. Try the below code line:-

<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />

回答7:

For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.

Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.

来源：https://stackoverflow.com/questions/36464846/cant-load-external-css-when-in-localhost

标签

html

css

get

arduino

localhost