-
-
Save bentruyman/824982 to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>My Web Page</title> | |
| <meta charset="utf-8"> | |
| <link href="/stylesheets/main.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
| // The below config assumes all of your stylesheets are being requested from a `/stylesheets/` directory | |
| var express = require('express'), | |
| stylus = require('stylus'); | |
| var app = express.createServer(); | |
| app.configure(function () { | |
| // ... your middleware here | |
| app.use(stylus.middleware({ | |
| src: __dirname + '/views', // .styl files are located in `views/stylesheets` | |
| dest: __dirname + '/public', // .styl resources are compiled `/stylesheets/*.css` | |
| compile: function (str, path, fn) { // optional, but recommended | |
| stylus(str) | |
| .set('filename', path) | |
| .set('compress', true) | |
| .render(fn); | |
| } | |
| })); | |
| app.use(express.static(__dirname + '/public')); | |
| }); |
It's actually a lot easier now with express 3.0, just put this line in your app.configure function:
app.use(require('stylus').middleware(__dirname + '/public'));
Then in your html files, just include the .styl files, but use the css extension. Express will compile it from styl to css on the fly:
What exactly does .set('filename', path) do ? If I have set the src and dest separartely then do I still need to use .set('filename', path) ?
What order does this app.use(require('stylus').middleware(__dirname + '/public')); need to be in? After routers but before static and error handlers (404 and 500)?
At least in Stylus 0.51.x the compile option should be like this:
compile: function(str, path) {
return stylus(str)
// chain additional stuff
.set('filename', path);
}Note that no render is invoked, no cb argument present in compile and the function must return stylus renderer.
For anyone having problems, it's important to call app.use(require('stylus').middleware('/path')) BEFORE calling app.use(express.static('..'))
@floriansegginger thanks! Awesome tip!
@floriansegginger thanks, finally got this working :)
Here is the compile function in coffeescript. The last line is to use the excellent nib module.