Mise À Jour (7 Décembre 2014)

Le connecter middleware de node-sass a été extrait dans des node-sass-middlewarecette réponse

---

Installer nœud-sass

En vous dossier de projet de lancer:

$ npm install node-sass

Modifier l'application.js

en supposant que vous avez généré votre application en utilisant

$ express my_app

app.js devrait ressembler un peu à ceci:

var express = require('express'),
    routes  = require('./routes');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

....

Voici les modifications:

var express = require('express'),
    routes  = require('./routes'),
    sass    = require('node-sass'), // We're adding the node-sass module
    path    = require('path');      // Also loading the path module

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);

  // notice that the following line has been removed
  // app.use(express.static(__dirname + '/public'));

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

  // The static middleware must come after the sass middleware
  app.use(express.static( path.join( __dirname, 'public' ) ) );
});

Il est important de noter que

app.use( sass.middleware ... );

doit être

app.use( express.static ... )

la raison est que nous voulons d'abord que sass compile tous les fichiers sass qui ont changé, puis les serve (ce qui est fait par express.static).

redémarrez votre application

Vous devez redémarrer votre application pour que ces modifications prennent place.

L'inclure quelque part donc, il compile

Nous pouvons maintenant inclure app.scss notre /sass dossier. Mais ça ne se compile pas encore. L'middleware sass compilera uniquement les fichiers demandés par vos applications, nous devons donc inclure le fichier css (à rendre) quelque part, comme dans `/views/layout.jade':

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="app.css")                 < we've added this
  body!= body `/views/layout.jade`

notez que contrairement à style.css qui est sous l' stylesheets sous-dossier, le app.css est lu à partir de la racine (dans ce cas /public).

Fixation chemins

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

après la première compilation, la hiérarchie du fichier et du dossier ressemblera à ceci:

Project folder
    app.js
    public
        app.css           < This is where the compiled file goes
        sytlesheets
            style.css
    sass
        app.scss          < This is where the sass file is

vous pouvez avoir la sortie compilée dans le stylesheets le dossier, plutôt que le public un; comme ceci:

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

de Cette façon, le point de vue de lien vers les fichiers css, comme ceci:

link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")

cependant, si vous changez la configuration de Sass middleware en

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

les choses vont poire forme.

Lorsqu'un lien vers le fichier css comme ceci:

link(rel="stylesheet", href="stylesheets/app.css")

la requête résultante sera pour stylesheets/app.css. Mais depuis que nous avons donné la config suivante au middleware sass:

src: __dirname + '/sass',

il va aller chercher /sass/stylesheets/app.scss, et le fichier n'existe pas.

une solution est de garder la configuration telle quelle, mais de mettre tous les fichiers sass dans le sous-dossier/sass/stylesheets/. Mais il est une meilleure solution.

si vous définissez un préfixe de configuration comme ceci:

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

il indiquera au compilateur sass que le fichier request sera toujours préfixé par /stylesheets et ce préfixe doit être ignoré, donc pour une requête pour /stylesheets/app.css, le middleware sass cherchera le fichier /sass/app.scss plutôt que /sass/stylesheets/app.scss.

code Final

app.js

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

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);

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

  app.use(express.static(path.join(__dirname, 'public')));

});

mise en page.jade

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="/stylesheets/app.css")
  body!= body

Dossiers et fichiers

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss