Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Node.js - express - jade - compile SASS/LESS

Anyone have a really newbie guide to nodejs - express - SASS/LESS? I have not been able to get this working. The example I have now is a bareboned as possible..

var express = require('express'),
    less = require('less'),
    app = express.createServer();

var pub_dir = __dirname + '/public';

app.configure(function(){ 
    app.use(express.compiler({ src: pub_dir, enable: ['less'] }));
    app.use(express.staticProvider( pub_dir ));
};

app.configure('development', function(){
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

The file style.css.less is located in pub_dir, I can access that directly, and the styling is

@brand_color: #4D926F;
body {
  color: @brand_color;
}

As far as I understand, the compilation is supposed to happen on start-up, and a css file will be generated in the src-dir, as dest is not specified.
My server runs fine, but regardless of how many ways I have tried messing around with the dirnames, directories and names of the LESS/SASS files (and their respective LESS/SASS content) I cannot get this working. Darn! Help.

like image 511
Gnimm Avatar asked Dec 03 '10 10:12

Gnimm


2 Answers

I'm also a newb trying to get this setup. I have tried a few snippets I found until I finally noticed that express has an 'express' command that sets up a new project.

Try express -c less to create a sample project with LESS as the CSS engine.

This should create the required directories. The new css files will be served from your static directory.

The configuration is:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'hbs');
  app.use(express.bodyDecoder());
  app.use(express.methodOverride());
  app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
  app.use(app.router);
  app.use(express.staticProvider(__dirname + '/public'));
});
like image 184
xer0x Avatar answered Oct 13 '22 00:10

xer0x


Your setup is the standard setup for readymade. Make sure that less compiler is installed on your system though.

npm install lessjs readymade

And then add the following to your server.js

app.use(require('readymade').middleware({root: "public"}));

like image 26
fulmicoton Avatar answered Oct 13 '22 00:10

fulmicoton