在 localhost 中无法加载外部 css答案

【问题标题】：Can't load external css when in localhost在 localhost 中无法加载外部 css
【发布时间】：2016-04-07 00:53:03
【问题描述】：

我正在使用 arduino、node.js 和 socket.io 开发一个项目。我在 localhost 中运行它，但是我的外部样式表无法加载。

错误似乎是说它无法从这条路径http://localhost:1337/css/main.css获取我的css

但是，如果我将 css 保留在 html 文件中的样式标记中，一切正常，有没有办法将 css 保留在外部，这样它就不会弄乱我的 html 文件？

这是我在我的 css 中加载的方式

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

这是我的文件结构的样子

这是我在 css 文件夹中的 main.css 文件

我的 main.css 文件位于 css 文件夹中，我正在使用 interface.html 文件

【问题讨论】：

您能分享一下您用来加载外部样式表的代码吗？
当然，刚刚更新了问题
您需要提供文件的确切位置...例如www.sample.com/css/main.css
你的文件结构在html文件旁边有css文件夹吗？
@SamTengWong 你是这个意思吗？ C:\Users\owner\Desktop\comp_web_lesson\example3\css\main.css？这是我的命令提示符中获取文件的路径

标签： html css get arduino localhost

【解决方案1】：

要提供静态文件，例如图像、CSS 文件和 JavaScript 文件，请使用 Express 中的 express.static 内置中间件函数。

函数签名是： app.use(express.static(__dirname));

然后你可以像下面这样包含

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

【讨论】：

这应该是最佳答案。

【解决方案2】：

试试这个：

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

注意href前面的./

否则包括完整路径名：

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

【讨论】：

嘿，感谢您的回复，但是我尝试了您的两个答案，但它们似乎对我不起作用

【解决方案3】：

这是我尝试过的，它对我有用

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

谢谢

【讨论】：

【解决方案4】：

相对路径从您的 html 路径开始

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

应该可以工作（因为您的 main.css 在 css 文件夹之外）。或者，您可以将 main.css 文件放在 css 文件夹中并使用“css/main.css”引用它

【讨论】：

【解决方案5】：

我遇到了和你一样的问题，但是我厌倦了下面的代码并且它可以工作。

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>

谢谢，希望对你有帮助......

【讨论】：

【解决方案6】：

我也面临这个问题......但我找到了一个解决方案并且它的工作原理。试试下面的代码行：-

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

【讨论】：

欢迎来到 Stack Overflow！如果您在代码前面放置 4 个空格，它将正确格式化为代码:-)

【解决方案7】：

对于遇到此问题的其他人，我遇到了同样的问题并找到了解决方案。我的 localhost 显然在跟踪缓存的 CSS 样式表文件的路径，即使它已被无数次覆盖。

解决方案：我不得不从我的文本编辑器下拉菜单中手动打开它，而不是直接从文件夹中打开样式表进行编辑。经过几个小时的挫折，就这么简单。我使用 Sublime Text，如果它有任何区别，但这似乎是 localhost 的问题，我怀疑清除缓存会产生相同的结果。

【讨论】：