Node-sass is not auto-compiling in latest node/express

Question

Using node (0.10.15) and express (3.3.4), along with the latest node-sass, and I can't get my scss files to compile. My app.js file looks like this:

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , sass = require('node-sass');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.use(
  sass.middleware({
    src: __dirname + '/public/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
  })
);

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

What am I missing to get sass to auto-compile?

If it matters, I'm using supervisor to monitor changes.

Answer 1

Middlewares are executed in the order they are attached to the app. The node-sass middleware only compiles scss files to css, it does not serve them. The static middleware is able to serve the compiled css files, however, it can’t do so as long as the css files are not compiled yet. If you switch static and sass middlewares, everything should work as expected:

app.use(
  sass.middleware({
    src: __dirname + '/public/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
  })
);

app.use(express.static(path.join(__dirname, 'public')));

Now the following happens when you request /style.css:

1. sass notices a request for a css file. If the dest file (__dirname + '/public' + '/style.css') is up-to-date, it does nothing. Otherwise, it looks for the src file (__dirname + '/public/sass' + '/style.scss') and compiles it, if it exists.
2. static notices a request for a static asset. If the requested file (path.join(__dirname, 'public') + '/style.css') does exist, it is served.