node-sass による SASS 環境構築

Angular プロジェクトと別に SASS を使う場合には、以下の手順で Node プロジェクトを作成するのが便利です。

Angular のプロジェクト作成時にスタイルシートのオプションとして、SASS を選択している場合、Angular プロジェクトの中では .scss ファイルは自動的にコンパイルされますので特にコンパイラの設定等を行う必要はありません。

% mkdir sass1
% cd sass1
% npm init -y
% npm install node-sass
% mkdir scss
% mkdir -p dist/css

上記の設定をした上で、package.json の scripts のエントリを次のように編集します。

{
  ...
  "scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  }
}

圧縮モードを有効にするには、--recursive の後ろに --output-style compressed を付けます。

このように設定し、次のコマンドを実行します。

% npm run sass

こうすると、node-sass は scss フォルダに作成されている SCSS ファイルをモニターします。もし変更があった時には自動的に CSS ファイルにコンパイルして dist/css フォルダに保存します。

新しく追加したファイルは自動的にはモニターされません。ファイルを新しく追加した場合には、一旦、Ctrl + C でモニターを停止して、モニターしなおしてください。

また、ファイルを更新したタイミングでコンパイルされますので、node-sass でモニターする前に編集した SCSS ファイルは、一度保存することで最新の状態にコンパイルされます。