Javascript 如何在node.js应用程序中提供CSS

我一直在摆弄node.js，似乎无法正确地为CSS服务。以前，我把它嵌入到我的HTML标题下的一个标记中，但现在我正在尝试学习如何将它作为一个单独的文件

到目前为止，我就是这么做的。在服务器下添加加载HTML之前，我尝试将其写入：

//This is all my main module

var http = require('http');
var router = require('./router.js');

var server = http.createServer(function (request, response) {

response.writeHead(200,{"Content-type" : "text/css"});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: "utf8"}, function(err, data) {
 if (!err) {
   response.write(data);
} else {
  console.log(err);
}
});

  router.home(request, response);
  router.user(request, response);

});

server.listen(3000);

我在路由器模块中调用的home函数如下所示。它也非常好用：

function home(request, response) {
  //if url == "/" && GET

if (request.url === "/"){
if(request.method.toLowerCase() === "get") {
  response.writeHead(200, commonHeaders);
  renderer.view("header", {}, response);
  renderer.view("search", {}, response);
  renderer.view("footer", {}, response);
  response.end();

} else {
    //if url == "/" && POST
//redirect to /:username

  request.on("data", function(postBody) {
    var query = querystring.parse(postBody.toString());
    response.writeHead(303, {"Location":"/" + query.username});
    response.end();
  });
  }
 }
}

我所有的HTML加载都非常好。如果我在chrome中使用我的开发工具，它表明我已经创建了一个单独的文件夹，其中有一个styles.css文件，但它是空的。为什么它会创建我的文件，但我的CSS没有被写入其中

我做错了吗？我的HTML标题中也链接了一个样式表。如何在node.js应用程序中提供CSS？我不知道为什么这不起作用

我所有的HTML加载都非常好。如果我在chrome中使用我的开发工具， 它显示了我已经创建了一个单独的文件夹，其中包含一个styles.css文件 是的，但它是空的。为什么它会创建我的文件，而我的CSS却不是 写在那里

这可能是因为

fs.readFileSync

是同步的，但是错误地为其提供了回调。请尝试以下方法：

response.writeHead(200, {'Content-type' : 'text/css'});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: 'utf8'});
response.write(fileContents);
response.end();

我做错了吗？我有一个样式表链接在 我的HTML也是。如何在node.js应用程序中提供CSS

“错误”是一个强有力的词，但是的，以这种方式手动提供静态文件并不是最好的主意，它可能无法扩展。您应该做的是将web服务器配置为服务于所有静态文件，并且只处理Node.js中的动态内容。我将不涉及细节，但在这里提出另一个关于堆栈溢出的问题，指定您正在运行的服务器，以及如何使用Node.js正确配置它。或者，您可以查阅一些关于如何在NGINX服务器上运行Node.js的教程，这将使您走上一条更可持续的道路

---

我希望这有帮助

为什么您试图通过节点进程而不是直接（例如，由nginx处理）为CSS提供服务？因为它是一个静态资产，所以不需要给节点进程增加负担。@m-a-r-c-e-l-I-n-o下面的答案对于您所做的是正确的。但是，我强烈建议您引入一个web应用程序框架，比如Express（节点市场上最流行的），而不是尝试通过本机模块处理http请求/响应周期。静态文件服务可能最好通过NGINX或类似方式处理，但即使您没有访问NGINX的权限或出于任何原因想使用“纯”节点，使用Express也会为您节省大量的时间和麻烦。@Paul valid point，如果您选择了这条路线（Robert），但它仍然无法按预期工作，您可能仍然需要访问服务器，以确保使用正确的mime类型提供文件，否则您将在chrome开发工具中再次看到一个空的

styles.css

文件。我主要是想了解它是如何工作的。这看起来确实是个坏主意，而且到目前为止一直让人头疼。这不是为了一个项目或任何东西——我只是想学习如何为CSS服务。不过，我计划获得Express，并通过它学习如何处理请求和响应。感谢您的快速响应。我试过了，但现在当我使用它时，它只是用CSS的纯文本替换我的页面。我想这比我想象的要困难得多。我正在学习node，我只是想学习如何做，只是想看看这个过程。这不是一个真正的项目或任何东西。我当然会看看NGINX，但这仍然让我感到沮丧，为什么它不起作用，而在我的脑海中，它似乎应该起作用。没问题：）你为什么不尝试为你的css（即

router.css（请求、响应）创建一个路由

并在其中，将我建议的代码放在我的帖子中，并将其包装在只针对css文件的if语句中

if（request.url==“/styles.css”）

。我认为您没有意识到的部分是css没有随页面一起发送。您的html页面自行发送，一旦它们到达客户端，客户端将从服务器请求该文件（假设它们有html css标记，即

），这有意义吗？成功了！我明白你的意思。我取消了以前的“发球”尝试css，然后在我的开发工具下看到styles.css仍然存在，因为我HTML中的链接标记仍然引用该文件，即使它不存在。所以我设置它，以便首先请求css，然后我的HTML可以被样式化，因为它发现链接中引用了样式表。你的最后一点非常清楚我为你做了很多事情。我接受了你的建议，而且工作得很好。我现在明白了这一点。非常感谢你，你帮了大忙。罗伯特，没问题。我很高兴听到你把它整理好了。请考虑把这个答案标记为“正确”（点击这个帖子左上方的灰色复选标记）。，如果你觉得它正确地回答了你的问题。祝你好运：）还有一件事要补充。在我的HTML css标签中，我的href过去是href='./views/styles.css'，但正如您所说，css不会随页面一起发送。因此，我不得不让HTML css标记引用客户端文件，而不是服务器文件，因此根据您的建议，我将其设置为href='styles.css'。再次感谢你的帮助。我已经为此挣扎了一段时间哈。