-
-
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')); | |
| }); |
Here is the compile function in coffeescript. The last line is to use the excellent nib module.
compile: (str, path) ->
stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib())
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 :)
I realise this was made two years ago, but for anyone that finds this, you might find it helpful to know that express can now include stylus for you when you create an app:
express --css stylus myapp