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

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

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

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

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

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

package.jsonを作成

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

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

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

npm init -y

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ファイルのパスを指定を指定します。

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

オプション

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

compressedを指定して圧縮したCSSにコメントを残す場合

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

まとめ

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

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

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。