Question

我正在尝试使用带有一些Bootstrap模板的Express.js创建一个Web应用程序。我使用了jade2html，除了没有样式之外，页面加载得很好。

我用：

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

技术上它在哪里，但当我尝试在chrome的工具中查看请求时，我看到：

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

这是否意味着我需要新的路线？或者我应该使用快速用户界面中的某些内容吗？

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

公共文件和目录不需要路由。如果dist不在公共场所，则无论您使用何种路径，都无法让浏览器看到它。否则使用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!");
    });

不确定为什么。关于拥有所有这些库的问题在于它使调试变得非常糟糕。

Express.js和Jade - 链接CSS

2 个答案: