加载单独的 css 样式表（heroku nodejs）答案

【问题标题】：loading separate css stylesheet (heroku nodejs)加载单独的 css 样式表（heroku nodejs）
【发布时间】：2013-07-07 03:42:25
【问题描述】：

我无法在本地和 heroku 服务器上为 heroku web 应用程序加载单独的 css 样式表。我最近从谷歌应用引擎迁移过来，我在那里加载样式表的方式工作得很好。我在这里做错了什么？任何帮助将不胜感激！！这是我的代码：

/app/server.js

var express = require("express");
var app = express();
app.use(express.logger());

var fs = require("fs");
var buf = fs.readFileSync("html/index.html");
var index = buf.toString();

app.get('/', function(request, response) {
    response.send(index);
});

var port = process.env.PORT || 5000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

/app/html/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Starters Singapore | Social Group Dating</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
  </head>

  <body>
    <div id="testdiv">This is a test</div>
  </body>

</html>

/app/css/index.css

body{
    margin:0;
    text-align: left;
    background-color: #666666;
}

#testdiv{
    width: 50%;
    height: 50%;
    background-color: #00a1ec;
}

【问题讨论】：

您能否更详细地解释一下您的问题？我无法得到它。

标签： css node.js heroku

【解决方案1】：

您正在使用 css 文件的相对路径。此路径相对于服务器根目录，而不是相对于 html 文件。我没有使用 Heroku NodeJS 的经验，但我认为路径应该是

/css/index.css

【讨论】：

【解决方案2】：

我也在 Heroku 上部署应用程序。我建议使用ejs 或jade 来呈现您的html。我更喜欢ejs。由于您使用的是 Express，我还将使用 this reference 创建一个“公共”目录。

然后在您的 layout.ejs 中（对于 Express 2.x.x 或 Express 3.x.x 使用 ejs-locals npm）

<!DOCTYPE html>
<html>
  <head>
    <title>The Title</title>
    <% stylesheet('/css/index.css') %>
    <%- stylesheets%>
  </head>
  <body>
  </body>
</html>

你也会有一个 index.ejs 你称之为 layout.ejs

<%- layout('layout') %>

我还建议在使用带有 ejs 的布局时参考this。学习 ejs 或 jam 一开始可能会有点烦人，但是一旦你更好地理解它就会很好。希望这不是一个加载太多的答案。

【讨论】：

【解决方案3】：

这对我有帮助：

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.use(express.static(__dirname + '/')); //use static dirname

假设您已将所有内容都放在根文件夹中。例如，我将 css 文件放置在名为 css 的文件夹中（位于根文件夹 * 中）。然后我可以在我的 index.html 文件中使用./css/bootstrap.min.css（它也在根文件夹中，与 css 文件夹相邻）。

*这里的根文件夹是指项目根文件夹。

【讨论】：