Stylus and Express - stylesheets are not re-compiled when modified

Question

I am running latest version of Node on Mac OS X. I've installed Express together with Stylus. Also the latest versions.

Stylus is not re-compiling my .styl files, when I modify them. How can I fix this?

The only solution to getting my .styl files re-compiled, is to delete the compiled .css files... re-starting my application, or doing a clear-cache-refresh (CMD + Shift + R) is not resulting a re-compile.

Here's a dump of my application configuration. It's basically the same as when you create a new express application with the executable...

app.configure(function ()
{
    this.set("views", __dirname + "/views");
    this.set("view engine", "jade");

    this.use(express.bodyParser());
    this.use(express.methodOverride());
    this.use(express.static(__dirname + '/public'));

    this.use(require("stylus").middleware({
        src: __dirname + "/public",
        compress: true
    }));

    this.use(this.router);
});

Both my .styl and the compiled .css files are located in [application]\public\stylesheets\

Cleisthenes

Answer 1

Put static() below the stylus middleware.

Lanellelanette

Figured that part out myself. But why is the order important? – Cleisthenes

It's evaluating in-order and matching on the first one it finds, because .use() is just appending the argument it receives onto an array. When a request comes in, it iterates the array. (Disclaimer: I haven't read the source, but I'd be surprised if that's not what it's doing). – Teliospore

yeah, that's more or less how it works, just order of use(). The ordering matters because to connect it's nothing but an arbitrary function, you the developer decides when it will be executed – Lanellelanette

I assumed that order was not important for the stylus call because it resulted in compilation of css files, not the serving of a response. I guess the call to the renderer is cognizant of the request to some degree then? Is this to aid in only rendering the css as needed? – Death

I'ma noob and I have no clue what Put static() below the stylus middleware. looks like. I would really like a visual. – Tropo

Move this line: "this.use(express.static(__dirname + '/public'));" to right above this line "this.use(this.router);" – Cheffetz

This is exactly the kind of comment that begs you to come back to Node, TJ! WHHHHYYYYYYYY!? – Jenson

Answer 2

It can be too late now, but I've just passed some hours ( T__T ) on this, and I think it's a bug of jade or something like that. I'll explain myself: With this code in server.js:

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(
  stylus.middleware({
    src:  __dirname + "/assets/stylus", 
    dest: __dirname + "/assets/css",
    debug: true,
    compile : function(str, path) {
      console.log('compiling');
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
  })
 );
app.use(express.static(__dirname + '/assets'));

and in the index.jade:

link(rel="stylesheet", href="css/style.css")

it works perfectly. The problem was when in the link tag there was:

link(rel="stylesheet", href="stylesheets/style.css")

and then it was not recompiling at all.

I hope this will help

Scraggly

haha you're god damn true! funny changed the folder name and it worked! – Ritenuto