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

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

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

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

プロジェクト内にnode-sassをインストール

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

package.jsonを作成

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

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

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

npm init

node-sassをインストール

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

npm install node-sass -D

Sassを自動コンパイル

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

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

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

npm-scriptsを利用しコマンドを実行

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コマンドの引数とオプションは以下となります。

引数

node-sassコマンドの第1引数には、sass・scssファイルを配置するディレクトリまたは、sass・scssファイルを指定します。また、ディレクトリを指定した場合には、--outputオプションも指定します。

オプション

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

まとめ

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

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。