Sassを自動コンパイルする方法｜node-sassのインストール・利用例【npm】

今回は、Sassをコンパイルできるnpmのパッケージ「node-sass」を利用し、指定したSassファイルが更新されたら自動でコンパイルする例となります。

また、npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。

npmのコマンドまとめ｜パッケージのインストール・削除・確認など【Node.js】

【npm】node-sassを利用しSassを自動コンパイルする例

node-sassをプロジェクト内にインストールする方法となります。

※すでにプロジェクト内でnpmを利用しpackage.jsonがある場合には、この手順は飛ばします。

まず、プロジェクト内でnpmを配置するディレクトリ（npmのルート）にcdコマンドで移動します。

そして、以下のコマンドでpackage.jsonを作成します。

npm init -y

次に、プロジェクト内のnpmのルートディレクトリで、以下のコマンドを実行しnode-sassをインストールします。

npm install node-sass -D

今回の例では、src/sassディレクトリ内にあるSassファイルが更新されたらコンパイルし、dest/cssディレクトリ内に圧縮したCSSファイルとソースマップを出力します。

また、上記例のディレクトリのパスは、プロジェクト内のnpmのルートディレクトリからのパスとなります。

以下、インストールしたnode-sassを利用し、Sassを自動コンパイルする例となります。

npmでは、コマンドをnpm-scriptsとして定義して実行できます。

例では、そのnpm-scriptsを利用しnode-sassコマンドを実行するため、次のようにpackage.jsonファイル内の"scripts"の値を追加します。

"scripts"の値はオブジェクトとなり、キーに任意のコマンド名を指定し、値に実行するコマンドを指定します。

"scripts": {
	"sass": "node-sass src/sass/ --output dest/css/ --output-style compressed --watch --source-map true"
}

そして、定義したnpm-scriptsを、以下のコマンドで実行します。

npm run sass

それにより、src/sassディレクトリ内の監視をスタートし、Sassファイルが更新されたらコンパイルします。

上記例で利用したnode-sassコマンドの引数とオプションについては、以下となります。

node-sassコマンドの第1引数には、sass・scssファイルを配置するディレクトリまたは、sass・scssファイルのパスを指定を指定します。

また、第1引数にファイルのパスを指定した場合には、第2引数に出力するCSSファイルのパスを指定し、第1引数にディレクトリのパスを指定した場合には、--outputオプションでCSSを出力するディレクトリのパスを指定します。

オプション	内容
--output	CSSを出力するディレクトリのパスを指定
--output-style	出力するCSSのスタイルを指定
--watch	ディレクトリ内・ファイルを監視し、更新されたらコンパイル
--source-map	trueを指定するとソースマップを出力

また、コンパイル時にcompressedを指定し、圧縮して出力したCSSにコメントを残す方法については、以下のリンク先を参考にしてみてください。

【Sass】CSSにコメントを残す方法｜コンパイル時にcompressedを指定した場合

以上がnpmのnode-sassを利用し、Sassを自動コンパイルする例となります。

node-sassのその他のコマンド・オプションなど、詳細ついては以下のリンク先を参考にしてみてください。