Node-sass not auto compiling in last node / express

Question

Using node (0.10.15) and expressing (3.3.4), together with the last node-sass, and I can not compile my scss files. My app.js file is as follows:

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 automate sass compilation?

If that matters, I use a dispatcher to monitor changes.

Answer 1

Middlewares run in the order in which they are attached to the application. The node-sass only compiles scss files into css , it does not serve them. The middleware static can serve compiled css files, but it cannot do this until the css files have been compiled. 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 when you request /style.css :

• sass notifies the request for the css file. If the dest file ( __dirname + '/public' + '/style.css' ) is updated, it does nothing. Otherwise, it searches for the src file ( __dirname + '/public/sass' + '/style.scss' ) and compiles it if it exists.
• static notifies the request of a static asset. If the file ( path.join(__dirname, 'public') + '/style.css' ) exists, it is served.

Answer 2

I also had serious problems related to Koa (koa.js) and koa-sass. I finally understood the problem. node-sass is too smart for itself:

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

I was getting 500 when I tried to access /public/sass/stylesheets/styles.css - but I didn’t have "stylesheets" in my path: my html template file looked at /stylesheets/styles.css , so I had to remove the prefix using prefix: '/stylesheets' .

Then I had a problem with the scss file - I accidentally copied the old .styl file and it tried to use nib - which I found after finding the debug: true parameter.

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

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