24

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\

Kos
  • 4,890
  • 9
  • 38
  • 42
cllpse
  • 21,396
  • 37
  • 131
  • 170

3 Answers3

37

Put static() below the stylus middleware.

tjholowaychuk
  • 3,026
  • 1
  • 21
  • 6
  • Figured that part out myself. But why is the order important? – cllpse May 10 '11 at 15:45
  • 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). – James Cape Jun 29 '11 at 12:24
  • 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 – tjholowaychuk Jul 07 '11 at 23:31
  • 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? – Adam Tolley Mar 11 '12 at 02:19
  • 5
    I'ma noob and I have no clue what `Put static() below the stylus middleware.` looks like. I would really like a visual. – ThomasReggi Jul 24 '12 at 06:25
  • 2
    Move this line: "this.use(express.static(__dirname + '/public'));" to right above this line "this.use(this.router);" – tokudu Aug 10 '12 at 02:20
  • This is exactly the kind of comment that begs you to come back to Node, TJ! WHHHHYYYYYYYY!? – Matt Fletcher Aug 22 '14 at 11:13
3

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

LowFieldTheory
  • 1,722
  • 1
  • 26
  • 39
0

Default settings Express.js

app.use(require('stylus').middleware(path.join(__dirname, 'public')));

Stylus compress setting Express.js you must add the style sheet in the document, page loading is compiled and compresses the css

app.use(require('stylus').middleware({src: path.join(__dirname, 'public'), compress: true}));
Alexis Sniffer
  • 51
  • 3
  • Welcome to Stack Overflow! While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. – Kevin Brown-Silva Jul 05 '15 at 18:54