Stylus not being applied to my jade file after res.render()

Question

I cannot seem to compile the stylus file in my project into a css file to be used in conjunction with the jade file. The content of the jade file is being displayed to the browser but it's not being formatted as specified in the .styl file.

I think it has something to do with the paths I'm using. I'm confused in regards to '/public', is that supposed to be a directory I actually create in my project tree or is it simply a placeholder for the current location or something similar?

Below are my required modules:

var express = require('express'),
    connect = require('connect'),
    account = require('./account'),
    stylus = require('stylus'),
    nib = require('nib'),
    http = require('http'),
    path = require('path');
var app = express();

Below is my configuration code:

function compile(str, path) {
    return stylus(str)
        .set('filename', path)
        .use(nib())
}

app.configure('development', function(){
    app.set('port', process.env.PORT || 8888);
    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.use(express.bodyParser());
    app.use(express.cookieParser('1234567890QWERTY'));
    app.use(express.session({secret: '1234567890QWERTY'}));
    app.use(express.errorHandler());
    app.use(stylus.middleware({
            src: __dirname + '/public',
            dest: __dirname + "/css",
            compile: compile
        }
    ));
});

Below is my handler:

app.get('/', function(req, res) {
      res.render('index',{title: 'Home'});
});

My directory tree currently has my script files under project root, and then the stylesheets, views, css and node_modules directories all also under root. There is no 'public' directory.

Answer 1

The answer was in where I was calling my app.use(express.static()) command, it needs to come AFTER the code to use the stylus middleware. I found this article informative to solve my question:

[1]: article http://www.quietless.com/kitchen/why-isnt-stylus-compiling-my-css/

Answer 2

app.use(stylus.middleware({
        dest: __dirname + '/public',
        src: __dirname + "/css",
        compile: compile
    }
))

The destination should be in the public dir. and your src contains your .styl files