无法使用 NodeJS 加载 CSS答案

【问题标题】：Cannot load the CSS with NodeJS无法使用 NodeJS 加载 CSS
【发布时间】：2018-02-24 16:26:37
【问题描述】：

我是 NodeJS 的初学者，在加载 CSS 时遇到问题。这是我的代码。

我只是创建一个在9090 端口运行的服务器并加载默认的HTML 文件。

var server = http.createServer(function(request, response) {
    var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
        response.writeHead(200,{"Content-Type": "text/html"});
        response.write(html);
        response.end();   
});
server.listen(9090);

在加载http://localhost:9090/ 时，我可以看到index.html html 页面，但看不到链接的css 功能。（如果我只是在浏览器中加载我的index.html，我就能看到css功能，但不通过服务器）

这是我的简单 HTML。

<html>
<head>
<link type="text/css" rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h2 class="heading"><em>Login Page</em></h2>
</body>
</html>

CSS文件

.heading {
    text-align: center;
}

我可以在浏览器控制台中看到以下警告

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:9090/css/styles.css".

任何帮助将不胜感激

【问题讨论】：

确保您将 css 链接到正确的路径
我觉得 css 文件的路径是正确的，因为如果我点击 VSCode 中的路径，我可以导航到 css 文件

标签： html css node.js

【解决方案1】：

问题是你创建了一个只提供一个文件的网络服务器，index.html。它不从本地文件系统读取任何 CSS 文件，也不提供任何 CSS 文件。

您可以分析传入的请求并查看请求的 URL 路径是否指向 CSS 文件。如果是，请读取 CSS 文件而不是 HTML 文件并将其与响应一起返回。

这是您的代码的工作修改版本（假设 styles.css 位于 index.html 所在目录的子目录中）：

var server = http.createServer(function(request, response) {
    if (request.url.match(/^\/css\//)) {
        var css = fs.readFileSync('./FirstApp/HtmlPages' + request.url);
        response.writeHead(200,{"Content-Type": "text/css"});
        response.write(css);
        response.end();
        return;
    }
    var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
    response.writeHead(200,{"Content-Type": "text/html"});
    response.write(html);
    response.end();
});
server.listen(9090);

请注意：我这样做只是为了学习，而不是为了构建一个实际的生产网络应用程序。为此，我将使用现有的 HTTP 服务器解决方案，例如 Express。

【讨论】：

【解决方案2】：

我建议在链接到 css 文件时检查您的文件路径是否正确。尝试删除 . 并将您的路径设置为 /css/styles.css（但归根结底是确保您拥有正确的路径。

作为初学者，一个常见的错误可能是您在编辑后忘记保存 css 文件。

此外，您应该使用 chrome 开发人员工具（右键单击页面并检查）来查看您的 css 是否已应用于您的 html。

如果您可以向我们展示 index.html 代码，那也可能会有所帮助。

【讨论】：

感谢您的帮助，但我也尝试过给.，但没有运气
@Pradeephebbar 尝试从链接中删除 rel="stylesheet"
我认为 CSS 文件的路径没有问题。问题是您创建了一个仅提供单个文件 index.html 的 Web 服务器。它不从本地文件系统读取任何 css 文件，也不提供任何 css 文件。
@PatrickHund ，那么我需要做些什么修改才能包含css
好吧，在你的函数中，你可以分析传入的请求，看看请求的 URL 路径是否指向 CSS 文件。如果是，请读取 CSS 文件而不是 HTML 文件并将其与响应一起返回。但我会这样做只是为了学习目的，而不是为了构建一个真正的 Web 应用程序。为此，我宁愿使用现有的 http 服务器解决方案，Express 是最常用的。