Tal Tal - 4 months ago 16
Jade Question

External CSS in Node JS

I am trying to bind my style into some external CSS that I have in my project directory.

My app structre looks like this:

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

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

....


my
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
.....





my
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;





My problem is that somehow
href='../public/stylesheets/animate.css'
does not load the correct file from my project directory and I do not understand why it does not work.

Answer

Then in html use

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