Enabling Stylus in Express

Although Stylus is the recommended CSS preprocessor for Express, it does not come baked into Express by default. However, adding Stylus support in Express is very easy.

The first step is to install the Stylus npm package in the application directory:

$ npm install stylus

The next step is to include the Stylus middleware and the static middleware in the application. It is recommended to add them right after the router middleware:

app.use(app.router);
app.use(require('stylus').middleware('./public'));
app.use(express.static('./public'));

By passing a single parameter to the middleware() method, we specify where to find the Stylus files. When a request for a CSS file is made to the app, it will look for the corresponding Stylus file in this directory.

The static middleware is required for serving the generated CSS files, along with other static resources from the app.

Stylus accepts more options than just a location for the stylus files. These options can be specified...