页面 CSS 不会加载 - 简单的 html 和 js 文件答案

【问题标题】：Page CSS will not load - simple html and js file页面 CSS 不会加载 - 简单的 html 和 js 文件
【发布时间】：2018-01-14 00:39:23
【问题描述】：

我正在创建一个简单的页面来开始学习 HTML、CSS 和 java 脚本。我的 HTML 文件带有指向我的 CSS 文件的以下链接，但由于某种原因没有加载任何 CSS。

我通过节点在本地主机上运行它。

html:

<!DOCTYPE html>
<html>
<head>
  <link href='./css/styles.css' type='text/css' rel='stylesheet'>
</head>

我的 server.js 文件：

var http = require('http');
var fs = require('fs');

const PORT=8080;

fs.readFile('./index.html', function (err, html) {

    if (err) throw err;

    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(PORT);
});

我也收到了错误

"资源被解释为样式表，但以 MIME 类型传输 text/html: "http://localhost:8080/css/styles.css"."

我是否需要在我的 server.js 文件中添加另一个“text/css”的内容类型？

文档树：

【问题讨论】：

您缺少一个重要的标签。节点js
感谢您添加标签，我确实错过了 :)

标签： css node.js

【解决方案1】：

您可以像这样将脚本从外部添加到您的html 页面。它可能位于head 标签内，就像您的 CSS 定义一样。

<script type="text/javascript" src="../Script_folder/server.js"></script>

并且要小心访问树中的文件。 ../ 表示上一级，~/ 指向root 节点。所以，我想知道你的路由在你的 CSS 地址中有一个特定的.。

<link href='../css/styles.css' type='text/css' rel='stylesheet'> 有两个点。 ../

【讨论】：

感谢您的回复，但不幸的是它仍然没有加载我的 css。
我在正文末尾的 index.html 文件中确实有以下来源，因为我想先加载所有页面内容。
能否请您发布文档树的图像。所以我们可以看到文件和文件夹的层次结构。
添加了文档树
两者处于同一级别。 <script src="server.js" /> 和 <link href='/css/styles.css' type='text/css' rel='stylesheet'> 对于index.html 应该足够了。

【解决方案2】：

在 href 属性中，您只使用了一个点而不是两个。你的 href 应该是这样的

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

【讨论】：

基于我的树，我认为一个点“。”有道理，因为我不想上一个目录然后到 css 文件夹。我有我的根文件夹“mySite”，其中有两个文件夹，css 和 js，在我的根目录中是我的 index.html 文件。