ノードJSの外部CSS

Question

私のスタイルを私のプロジェクトディレクトリにあるいくつかの外部CSSにバインドしようとしています。

マイアプリのstructreは次のようになります。

webDTU 
    app.js 
    public/ 
    stylesheets/ 
     style.css 
     avgrund.css 
     animate.css 

    views/ 
    index.jade 
    UserHome.jade 
    .... 

    .... 

私UserHome.jade：

doctype html 
 
html 
 
    head 
 
    title MQTT Chat Application 
 
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js') 
 
    link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic', type='text/css') 
 
    link(rel='stylesheet', href='../public/stylesheets/animate.css', type='text/css') 
 
    link(rel='stylesheet', href='../public/stylesheets/style.css', type='text/css') 
 
    link(rel='stylesheet', href='../public/stylesheets/avgrund.css', type='text/css') 
 
    body 
 
    .avgrund-contents 
 
     header 
 
     h1 hi #{title} 
 
     .pr.center.wrapper 
 
     .cf.pr.chat.animate 
 
      .pa.chat-shadow 
 
      .....

私app.js：

var express = require('express'); 
 
var path = require('path'); 
 
var favicon = require('serve-favicon'); 
 
var logger = require('morgan'); 
 
var cookieParser = require('cookie-parser'); 
 
var bodyParser = require('body-parser'); 
 
var mongoose = require('mongoose'); 
 

 
var mongo = require('mongodb'); 
 
var monk = require('monk'); 
 
var db = monk('localhost:27017/webDTU'); 
 

 

 

 
var routes = require('./routes/index'); 
 
var users = require('./routes/users'); 
 

 
var app = express(); 
 

 

 

 
// view engine setup 
 
app.set('views', path.join(__dirname, 'views')); 
 
app.set('view engine', 'jade'); 
 

 
// uncomment after placing your favicon in /public 
 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
 
app.use(logger('dev')); 
 
app.use(bodyParser.json()); 
 
app.use(bodyParser.urlencoded({ extended: false })); 
 
app.use(cookieParser()); 
 
app.use(express.static(path.join(__dirname, 'public'))); 
 

 
app.use(function(req,res,next){ 
 
    req.db = db; 
 
    next(); 
 
}); 
 

 
app.use('/', routes); 
 

 
// catch 404 and forward to error handler 
 
app.use(function(req, res, next) { 
 
    var err = new Error('Not Found'); 
 
    err.status = 404; 
 
    next(err); 
 
}); 
 

 
// error handlers 
 

 
// development error handler 
 
// will print stacktrace 
 
if (app.get('env') === 'development') { 
 
    app.use(function(err, req, res, next) { 
 
    res.status(err.status || 500); 
 
    res.render('error', { 
 
     message: err.message, 
 
     error: err 
 
    }); 
 
    }); 
 
} 
 

 
// production error handler 
 
// no stacktraces leaked to user 
 
app.use(function(err, req, res, next) { 
 
    res.status(err.status || 500); 
 
    res.render('error', { 
 
    message: err.message, 
 
    error: {} 
 
    }); 
 
}); 
 

 

 
module.exports = app;

私の問題は何とかhref='../public/stylesheets/animate.css'が私のプロジェクトディレクトリから正しいファイルをロードしませんし、それが動作しない理由を私は理解していないということです。 HTMLの使用でその後

Answer 1

href='/public/stylesheets/animate.css'