Question

这是我的文件结构： http://i.imgur.com/XleRVbc.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

这是index.jade：

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

div.footer

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

http://i.imgur.com/8CjRlKC.png

css位于名为bootstrap / css

的文件夹中

Answer 1

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

的package.json

app.js

node_modules /

| - ...

公共/

| -img /

| -CSS /

| -js /

路由/

视图/

..您可以通过以下方式表达对这些文件的了解：

var app = module.exports = express();

...

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

尝试将该行代码添加到app.js（如果它不存在），创建公共文件夹，在那里移动bootstrap文件夹，并通过链接引用它（rel ='stylesheet'，href ='bootstrap / css /在玉器中的bootstrap.min.css'）

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')));

玉模板不包括CSS

2 个答案: