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を出力するディレクトリのパスを指定します。
オプション
オプション | 内容 |
--output | CSSを出力するディレクトリのパスを指定 |
--output-style | 出力するCSSのスタイルを指定 |
--watch | ディレクトリ内・ファイルを監視し、更新されたらコンパイル |
--source-map | trueを指定するとソースマップを出力 |
compressedを指定して圧縮したCSSにコメントを残す場合
また、コンパイル時にcompressedを指定し、圧縮して出力したCSSにコメントを残す方法については、以下のリンク先を参考にしてみてください。
まとめ
以上がnpmのnode-sassを利用し、Sassを自動コンパイルする例となります。
node-sassのその他のコマンド・オプションなど、詳細ついては以下のリンク先を参考にしてみてください。