node-sassを使ってWindowsでsassをコンパイルする環境を構築する

node-sassを使ってWindows上にsassをコンパイルする環境を構築します。

昨今、sassをコンパイルする環境は様々です。
中には環境構築が複雑でタスクランナーなどがエラーで走らなかったりと、そもそも効率悪くなってない？と疑問に思うこともありますが、今回はシンプルに「scssファイルをコンパイルする」ことだけに焦点を当てたいと思います。

導入した環境は以下の通りです。

Windows 10 Home 64bit

Node.js 10.14.1

node-sass 4.7.2

Node.jsをインストールする

まずはnode-sassを動作させるために必要なNode.jsをインストールします。
Node.js

安定版の「LTS」バージョンと最新版の「Current」バージョンがあると思いますが、安定版を選択しダウンロードします。
ダウンロードしたらファイルを実行してインストールします。
オプションなど選択する必要は特にないので、デフォルトのままインストールを進めて問題ないでしょう。

インストール後にコマンドプロンプトを起動した、以下のコマンドが実行できればNode.jsのインストール成功です。

> node -v

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

次にnode-sassをインストールします。
インストールにはnpm（Node Package Manager）コマンドを使います。

> npm install -g node-sass

以下のコマンドが実行できればnode-sassのインストール成功です。

> node-sass -v

scssファイルをコンパイルする

今回はsassファイルの記述方法は割愛しますが、例えばstyle.scssファイルをコンパイルする場合、以下のように実行します。

> node-sass style.scss style.css

「–output-style compressed」のオプション指定で圧縮したファイルを出力することができます。

> node-sass style.scss style.min.css --output-style compressed

「scss」フォルダにまとめられたsassファイルを、cssファイルの出力先を指定してまとめてコンパイルすることができます。

> node-sass -r ../scss/ -o ../css/

cssファイルが変更保存されたことを監視して、都度コンパイルを実行することもできます。

> node-sass style.scss style.css -w

mapオプションを有効にすると、mapファイルが生成されます。mapファイルがあれば、ブラウザなどスタイル解析ツールから、scssファイルの記述個所を追うことができます。

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