Question

我是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".

任何帮助将不胜感激

Answer 1

问题在于您创建的Web服务器仅提供单个文件 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);

请注意：我只会出于学习目的而不是用于构建实际的生产Web应用程序。为此，我将使用现有的HTTP服务器解决方案，例如Express。

Answer 2

我建议在链接到css文件时检查文件路径是否正确。请尝试删除.，并将路径设为/css/styles.css（但这可以确保您拥有正确的路径。

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

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

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

无法使用NodeJS加载CSS

2 个答案: