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

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

I also had serious problems setting this up with Koa (koa.js) and koa-sass. Eventually I figured out the problems. node-sass is 'too clever' for it's own good:

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

I was getting a 500 when it tried to access /public/sass/stylesheets/styles.css- but I didn't have 'stylesheets' in my path: My html template file was looking at /stylesheets/styles.css so I had to remove the prefix with prefix: '/stylesheets'.

Next I had a problem with the scss file - I had accidentally copied an old .styl file and it was trying to use nib - which I found after discovering the debug: true setting.

As soon as I replaced it with a valid css or scss file it compiled and rendered using koa-static.

Although this is a koa-sass issue, koa-sass just wraps node-sass with a generator so it belongs here (IMO).

Answer 2

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.