노드 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'