翡翠模板不包括 CSS

Question

这是我的文件结构：https://i.stack.imgur.com/kzsTs.png

在视图中，我有具有以下代码的layout.jade：

doctype 5
html
    head
        title= title
        link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
        script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
        script(src='../bootstrap/js/bootstrap.min.js')
body
    block content

这是索引.翡翠：

extends layout
block content
      div.top
        form.form-horizontal(method="post", id="loginForm")
          label Username
          input.span3(id="username", type="text", name="User", placeholder="Enter your             username")
          label Password
          input.span3(id="password", type="password", name="Password")
          input.btn(type="submit", value="Log In")
div.container
    div.content
          table.table.table-striped
            thead
              tr
                th Table
                th Heading
    tbody
      tr
        td Blah
        td Test
      tr
        td Hello
        td World

页脚

但似乎没有应用CSS，因为页面看起来像：

https://i.stack.imgur.com/f4ALy.png

css 位于名为 bootstrap/css 的文件夹中

Answer 1

你用的是快递吗？如果是这样，则似乎文件结构中缺少公用文件夹。通常你有这样的东西：

包.json

应用.js

node_modules/

|- ...

公共/

|-图像/

|-css/

|-js/

路线/

视图/

..您通过以下方式让快递知道这些文件：

var app = module.exports = express();
...
app.use(express.static(__dirname + '/public'));

尝试将该行代码添加到应用程序中.js如果它还没有，请创建公共文件夹，将引导文件夹移动到那里，并通过 link（rel='stylesheet'， href='bootstrap/css/bootstrap.min.css'）在 jade 中引用它

Answer 2

尝试使用绝对路径而不是相对路径。相对路径可能会令人困惑，因为它们相对于app.js而不是视图

。

改变

link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')

自

link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')

还要确保在app.js中正确提供静态文件，如下所示：

app.use(express.static(path.join(__dirname, 'bootstrap')));