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

express, node.js, sass

Solution

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`:

- `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.

- `static` notices a request for a static asset. If the requested file (`path.join(__dirname, 'public') + '/style.css'`) does exist, it is served.

Problem

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.

Original source