Express.js 和 Jade - 链接 CSS

Question

我正在尝试使用 Express.js 和一些 Bootstrap 模板创建一个 Web 应用程序。我使用了jade2html，页面加载正常，除了没有样式。

我用：

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

这在技术上就是它所在的位置，但是当我尝试在 chrome 的工具中查看请求时，我看到：

Request URL:http://localhost:1248/dist/css/bootstrap.min.css

这是否意味着我需要一条新路线？还是我应该使用 express UI 中的某些内容？

index.jade:（翻译自 bootstrap 的示例）

doctype html
html(lang='en')
head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(name='description', content='')
    meta(name='author', content='')
    link(rel='shortcut icon', href='')
    title Starter Template for Bootstrap
    //
       Bootstrap core CSS 
    link(href='../../dist/css/bootstrap.min.css', rel='stylesheet')
    //
       Custom styles for this template 
    //link(href='starter-template.css', rel='stylesheet')
    //
       Just for debugging purposes. Don't actually copy this line! 
    //if lt IE 9
      script(src='../../assets/js/ie8-responsive-file-warning.js')
    //
       HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries 
    //if lt IE 9
      script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
      script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
  body
    .navbar.navbar-inverse.navbar-fixed-top(role='navigation')
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='#') Project name
        .collapse.navbar-collapse
          ul.nav.navbar-nav
            li.active
              a(href='#') Home
            li
              a(href='#about') About
            li
              a(href='#contact') Contact
        //
          /.nav-collapse 
    .container
      .starter-template
        h1 Bootstrap starter template
        p.lead
          | Use this document as a way to quickly start any new project.
          br
          | All you get is this text and a mostly barebones HTML document.
    //
       /.container 
    //
       Bootstrap core JavaScript
          ================================================== 
    //
       Placed at the end of the document so the pages load faster 
    script(src='https://code.jquery.com/jquery-1.10.2.min.js')
    script(src='../../dist/js/bootstrap.min.js')

服务器：

var compiler = require("../src/compiler"),

    fs       = require("fs"),
    graph = require("../src/graph-text").Graph,
    sys = require("sys"),  
    my_http = require("http"),
    XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest,
    express = require("express"),
    path = require('path');


    var app = express();

    app.configure(function(){
      app.set('port', process.env.PORT || 8080);
      app.set('views', __dirname + '/views');
      app.set('view engine', 'jade');
      app.use(express.favicon());
      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(express.static(path.join(__dirname, 'public')));
    });

    app.configure('development', function(){
      app.use(express.errorHandler());
    });

    app.all("*", function(request, response, next) {
      response.writeHead(200, { "Content-Type": "text/plain" });
      next();
    });

    app.get("/", function(request, response) {
      response.render('index.jade');
    });



    app.get("*", function(request, response) {
      response.end("404!");
    });

    app.listen(app.get('port'));
    console.log("Express app started on port %d",app.get('port'));

Answer 1

您可以尝试在您的公共目录下引用 CSS 吗？

您的服务器正在公开您的根目录

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

public 下的文件和目录不需要路由。如果 dist 在 public 之外，则无论您使用的路径如何，都无法使其对您的浏览器可见。否则使用 dist 作为你的公共目录。

所以

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

服务器

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

Answer 2

通过删除解决了这个问题：

app.get("*", function(request, response) {
      response.end("404!");
    });

不知道为什么。拥有所有这些库的问题在于，它使调试变得非常简单。