Sublime Text で sass(scss)の最速コンパイルを行う( node-sass / gulp-sass )

いろいろ試した結果、次の node-sass を使う方法が最も速くおすすめです。

● 1. node-sass をインストールする

node-sass グローバル環境にインストールします。(どこのディレクトリにいても使用できるようになります)

npm install -g node-sass

● 2-. gulp-sass をインストールする

gulp-sass をローカル環境にインストールします。
めんどくさい方は こちらから一式ファイルをダウンロードしてください。

npm install gulp-sass --save-dev

gulpfile.js は 以下のようなファイルで作成します。

var gulp    = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./html/assets/scss/**/*.scss')
    .pipe(sourcemaps.init())
	.pipe(sass({})
	   .on('error', sass.logError)
    )
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./html/assets/css'));
});

● SublimeTextにビルドを追加する(手動)

Package Controlからインストールできる SASS Build は Rubyのsass を使用するので動作が遅い。 そこで、手動で gulp-sass を使用するように手動でビルドを作成します。

1. ツール → ビルドシステム → ビルドシステム追加

2. 以下の内容で保存

ファイル名は SASS.sublime-build など好きなのをつけてください。
拡張子は .sublime-build から変更しないこと 。
path に 自分の環境の node-sass のパスを記述します。

{
	"cmd" : ["gulp sass"],
	"selector" : "source.scss,source.sass",
	"shell" : true,
	"working_dir": "$project_path" ,
	//  パスを明示的に設定する場合はこちらを設定する
	"osx": {
	    "path": "$HOME/.nodebrew/current/bin/node-sass:$PATH"
	},
}

これでビルドシステムを「SASS」にしてビルド実行で sass → css 変換が行われます。 

● 更新して保存するたびに自動でビルドするように設定する

SublimeOnSaveBuild

をインストールします。 これで自動ビルドが実行されます。

なお、 gulp を使わずにコンパイルしたい場合は

node-sass ./scss/style.scss ./css/style.css --source-map true

のようなコマンドを実行すればOKです。

No.1288
02/18 14:47

edit