CODEWITHSUNDEEP
node.jsexpresssass
bjork24
bjork24

Reputation: 3183

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.

Upvotes: 8

Views: 6013

Answers (3)

linuxdan
linuxdan

Reputation: 4854

Try using the prefix option:

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

Upvotes: 2

Shawn Miller
Shawn Miller

Reputation: 7080

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.

Upvotes: 1

robertklep
robertklep

Reputation: 203304

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

Upvotes: 8

Related Questions