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

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

オプション

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

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

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

まとめ

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

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

参考サイトなど

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

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

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