node-sass not compiling with node / express

Question

I'm trying to get node-sass working with express, and I simply can't get it to do any compiling at all. This is my app.js file:

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

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(sass.middleware({
     src: __dirname + '/public/sass',
     dest: __dirname + '/public/stylesheets', 
     debug: true
  }));
  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.configure('development', function(){
  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'));
});

I have public/sass and public/stylesheets, yet no matter what .scss files I place in the sass directory nothing is getting compiled. Is there something more that I need to run beyond node app.js?

I'm really close to giving up and just install the sass gem and keeping an extra tab open to watch the directory.

Answer 1

It's as confusing as the Stylus middleware (by which it is inspired, it says).

The folder structure of src should mimic the eventual structure of the destination and the path you're using to request the CSS file. If you want your CSS files to be stored like this:

./public/stylesheets/app.css

And the URL to access the file will be:

http://.../stylesheets/app.css

You need to configure the middleware like this:

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

And your SASS folder structure like this:

./public/sass/stylesheets/app.scss

I believe it works like this:

• take the path of the HTTP request: /stylesheets/app.css
• to find the SCSS file, concatenate the URL path to src and replace extension: ./public/sass/stylesheets/app.scss
• for the destination, concatenate the URL path to dest: ./public/stylesheets/app.css

Answer 2

Try using the prefix option:

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