web-dev-qa-db-ja.com

NodeJS Expressとnode-sassでSASSを自動コンパイルする

私はnode.jsを使用して開発していますが、cssを書く代わりに、ページを更新するたびに自動コンパイルするSCSSファイルを書きたいと思っています。

NodeJS、Express、およびnode-sassを使用しているときにSASSファイルを自動コンパイルするにはどうすればよいですか。

node.jsexpresssassnode-sass
26
Izhaki

更新（2014年12月7日）

node-sass の接続ミドルウェアが node-sass-middleware に抽出されました。 this answer を参照してください

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ミドルウェアは、アプリケーションによって要求されたファイルのみをコンパイルするため、 `/ views/layout.jade 'のように（レンダリングされる）cssファイルをどこかに含める必要があります。

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`

stylesheetsサブフォルダーの下にあるstyle.cssとは異なり、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を探して探しますが、そのようなファイルは存在しません。

1つの解決策は、設定をそのまま保持することですが、すべてのsassファイルをサブフォルダー `/ sass/stylesheets /に入れます。しかし、より良い解決策があります。

プレフィックス設定を次のように定義する場合：

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

要求ファイルには常に/stylesheetsというプレフィックスが付き、このプレフィックスは無視される必要があることをsassコンパイラーに伝えます。したがって、/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
70
Izhaki

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