2018-02-28

node-sass だけで SCSS をコンパイルする素振り環境を作ってみた

これまで Angular CLI が内蔵しているモノだったり、Gulp プラグインとしてしか使ってこなかった node-sass。今回は node-sass を直で使ってみようと思う。

# 適当な作業ディレクトリを作って移動する
$ mkdir suburi-sass && cd $_

# package.json を作る
$ npm init -y

# node-sass をインストールし devDependencies に追加しておく
$ npm i -D node-sass

# コンパイル時のエントリポイント (起点) となるメインの SCSS ファイルを作っておく
$ touch styles.scss

ココまでできたら、package.json に、以下のようなスクリプト (npm-scripts) を定義する。

{
  "name": "suburi-sass",
  "scripts": {
    "node-sass": "node-sass ./styles.scss -r -o ./ --output-style compressed && node-sass ./styles.scss -r -o ./ --output-style compressed -w"
  },
  // 以下略
}

node-sass の -w (Watch) モードは初回ビルドをしてくれないようなので、どうしてもこういう書き方が必要になる。同じことを2回書いているようでキモいが、おおよそこうしないといけないようだ。

参考 : node.js - Using node-sass watch option with npm run-script - Stack Overflow

コレで準備完了。CLI で $ npm run node-sass を実行すると、styles.scss を一度コンパイルしたあと、監視モードになる。あとは styles.scss をバンバン書いていけば良いだけ。

もしも npm run がうまくいかず、Error: ENOENT: no such file or directory, scandir '**/node_modules/node-sass/vendor' などといったエラーが出る場合は、以下のコマンドを打って、node-sass の C++ 部分を再ビルドしてやると解決するだろう。

$ npm rebuild node-sass

参考 : Error: ENOENT: no such file or directory, scandir '**/node\modules/node-sass/vendor' · Issue #1579 · sass/node-sass · GitHub

このように、node-sass だけで SASS / SCSS を素振りするお試し環境がサクッと作れた。