Ответ 1

Обновление (7 декабря 2014 г.)

Соединительное промежуточное программное обеспечение от node-sass было извлечено в node-sass-middleware, см. этот ответ

Установить node -sass

В папке вашего проекта:

$ npm install node-sass

Изменить app.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. Но пока он не будет компилироваться. Связующее ПО Sass будет только компилировать файлы, которые запрашиваются вашими приложениями, поэтому мы должны где-то включать файл (для отображения) css, например, в `/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`

Обратите внимание, что в отличие от 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

Вы можете захотеть получить скомпилированный вывод в папке stylesheets, а не в 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 следующую конфигурацию:

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

});

layout.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

Папки и файлы

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

Ответ 2

Связующее ПО для подключения из node-sass было извлечено в node-sass-middleware. Используйте следующее:

var fs = require('fs'),
  path = require('path'),
  express = require('express'),
  sassMiddleware = require('node-sass-middleware')

var app = module.exports = express();

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

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