Update (7 Dec 2014)

промежуточное ПО connect от узел-sass была выделена в узел-sass-промежуточное ПО см. ответ

установить узел-sass

в папке проекта запустите:

$ npm install node-sass

изменить приложение.js

предполагая, что вы создали свое приложение с помощью

$ express my_app

код app.js должно выглядеть это:

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'));
});

....

вот модификации:

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' ) ) );
});

важно отметить, что

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

прежде

app.use( express.static ... )

причина в том, что мы сначала хотим, чтобы sass скомпилировать любые файлы sass, которые изменились, только затем обслуживать их (что делается express.static).

перезагрузить приложение

вам придется перезапустить приложение, чтобы эти изменения произошли.

включить его где-то так он компилирует

теперь мы можем включить app.scss в нашем . Но он пока не компилируется. Промежуточное программное обеспечение sass будет компилировать только файлы, запрошенные вашими приложениями, поэтому мы должны включить (для визуализации) файл css где-нибудь, например, в `/views/layout.Джейд:

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`

обратите внимание, что в отличие от style.css под stylesheets подпапках,app.css читать от корня (в данном случае /public).

ремонт пути

С

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

после первой компиляции, иерархия файлов и папок будет выглядеть так:

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

вы можете иметь скомпилированный вывод в , а не public один; например, так:

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

таким образом, представление будет ссылаться на файлы css следующим образом:

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

однако, если вы измените конфигурацию промежуточного ПО sass на

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

все будет идти груша форма.

при ссылке на файл css, например:

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

результирующий запрос будет для stylesheets/app.css. Но так как мы дали Sass middleware следующую конфигурацию:

src: __dirname + '/sass',

он будет идти и искать /sass/stylesheets/app.scss, и такого файла не существует.

одно из решений-сохранить конфигурацию как есть, но поместить все файлы sass в подпапку `/sass/stylesheets/. Но есть лучшее решение.

если вы определяете конфигурацию префикса вот так:

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

он сообщит компилятору sass, что файл запроса всегда будет иметь префикс /stylesheets и этот префикс следует игнорировать, таким образом, для запроса /stylesheets/app.css, промежуточное ПО sass будет искать файл /sass/app.scss, а не /sass/stylesheets/app.scss.

код

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')));

});

макет.Джейд!--43-->

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

папки и файлы

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