Node-Sass | Not recompiling unless I manually delete the css file

Question

I am just starting out using node-sass. I have it to the point where I request style.css. If I have no style.css in my stylesheets directory then it compiles it for me, however once it compiles then it will not update/recompile changes until I delete the css files manually.

Any help with this would be much appreciated.

app.js

/**
 * Module dependencies.
 */

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

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

app.use(
    sass.middleware({
     src: __dirname + '/public/sass', //where the sass files are 
     dest: __dirname + '/public', //where css should go
     debug: true, // obvious
     outputStyle: 'compressed'
    })
);

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

// 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'));
});

Answer 1

You need to switch the declarations of the static and the SASS middleware (that is, the static middleware should come after the sass middleware - see this answer for more info) :

// Notice we are removing this line:
// app.use(express.static(path.join(__dirname, 'public')));

app.use(
  sass.middleware({
   src: __dirname + '/public/sass', //where the sass files are 
   dest: __dirname + '/public', //where css should go
   debug: true, // obvious
   outputStyle: 'compressed'
  })
);
app.use(express.static(path.join(__dirname, 'public')));

Otherwise, when you request the CSS file and it exists already, the static middleware will handle it and the request will never reach the SASS middleware.