Skip to content

Instantly share code, notes, and snippets.

@bentruyman

bentruyman/express-stylus.html

Created February 13, 2011 19:27
Show Gist options
  • Save bentruyman/824982 to your computer and use it in GitHub Desktop.
Save bentruyman/824982 to your computer and use it in GitHub Desktop.
Download ZIP
Using Stylus Middleware with Express
Raw
express-stylus.html
<!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>
Raw
express-stylus.js
// 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'));
});
Copy link

ghost commented Nov 16, 2012

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:

@vishalchandra
Copy link

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) ?

@wamoyo
Copy link

wamoyo commented Nov 22, 2014

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)?

@inca
Copy link

inca commented Jun 8, 2015

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.

@floriansegginger
Copy link

floriansegginger commented Sep 26, 2016 •
edited
Loading

For anyone having problems, it's important to call app.use(require('stylus').middleware('/path')) BEFORE calling app.use(express.static('..'))

@ElegantSudo
Copy link

@floriansegginger thanks! Awesome tip!

Copy link

ghost commented Nov 16, 2016

@floriansegginger thanks, finally got this working :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment