node-sass not compiling with node / express

Question

node-sass not compiling with node / express

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.

node.js
express
sass

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

I was having similar issues getting the node-sass middleware working. I eventually gave up and tried asset-rack which I was also unable to get working until I started using this fork: https://github.com/techpines/asset-rack/pull/76

Frustrated that the pull request for the asset-rack fork had been sitting around for 11 months I ended up just writing my own static file middleware called Electricity that supports Sass among some other nice to have features.

Answer 3

Try using the prefix option:

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