javascript - 你如何在 node.js 应用程序中提供 CSS

Question

我一直在摆弄 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？我不知道为什么这不起作用。

Answer 1

All of my HTML loads perfectly fine. If I use my dev tools in chrome, it shows that I've created a separate folder with a styles.css file in it, but it's empty. How come it's creating my file, but my CSS isn't being written in there?

这可能是因为 fs.readFileSync 是同步的，但错误地为其提供了回调。试试这个:

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

Am I doing this all wrong? I have a stylesheet linked in the header of my HTML as well. How do you serve CSS in a node.js application?

错误是一个严重的词，但是，是的，以这种方式手动提供静态文件并不是最好的主意，它可能无法扩展。你应该做的是配置你的网络服务器来服务所有静态文件，并且只处理 Node.js 中的动态内容。我不会触及细节，但会在 Stack Overflow 上问另一个问题，指定您正在运行的服务器以及如何使用 Node.js 正确配置它。或者，您可以查找一些关于如何使用 NGINX 服务器运行 Node.js 的教程——这应该会让您走上一条更可持续的道路。

希望对您有所帮助!