npm-scriptsで簡単・高速・シンプルに Sass / Scss コンパイル!


2018年現在 Sass / Scss はCSSプリプロセッサの中で最も人気があります。
Sassが登場して以来、何年にもわたりシンプルで再利用可能なCSSを書くのに役立っている方は多いでしょう。

SassからCSSにコンパイルする方法は多数存在しますが、
この記事ではタスクランナーに頼らない2018年現在で流行りの
簡単かつシンプルかつ高速のコンパイルが行える
npm-scriptsでのコマンドラインを使ったコンパイル方法を説明します。

Node.jsのインストール

コマンドラインでSassをコンパイルするには、
まずnode.jsをインストールする必要があります。
公式ウェブサイトnodejs.orgからダウンロードし、パッケージを開いてウィザードに従います。

NPMを初期化する

NPMはJavaScriptのノードパッケージマネージャです。
NPMを使用すると、サードパーティのパッケージを
簡単にインストールしたりアンインストールすることができます。

NPMでSassプロジェクトを初期化するには、
ターミナルを立ち上げCDコマンドでプロジェクト内のフォルダに移動します。

Macintosh:~ You$ cd /Users/You/Project

ディレクトリに移動したらコマンドを実行します。

npm init

コマンドを実行するとプロジェクトに関するいくつかの質問をされるので回答します。
ここでの質問はあとで変更出来ますし特に重要でないものが多いので特に気にする必要はありません。
その後、pacakge.js ファイルが作成されます。

Node-Sassをインストールする

Node-sassは、Sassを非常に早くCSSにコンパイルするためにNPMパッケージです。
node-sassをインストールするには、端末に次のコマンドを実行します。

npm install node-sass

package.json を編集する

Sassをコンパイルするためのスクリプトを書く準備が整いました。
コードエディタで package.jsonファイルを開きます。
以下のようなものが表示されます。

{
  "name": "sass-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"スクリプトテスト" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

このスクリプトにSCSSコンパイル出来るように以下のように編集します。

  "scripts": {
    "test": "echo \"スクリプトテスト" && exit 1"
    "scss": "node-sass --watch --include-path scss scss/style.scss css/style.css --output-style compressed"
  },

簡単に上記のスクリプトの説明をします。

  1. node-sass:node-sassパッケージを参照してください。
  2. –watch: ” scss /フォルダ内のすべての.scssファイルを見て、変更があるたびにそれらを再コンパイルする”というオプションのフラグ。
  3. scss:すべての.scssファイルを置くフォルダ名。
  4. css:コンパイル済みCSSの出力フォルダ。
  5. –output-style:出力されるcssを圧縮する形式を指定します。

以上です。
このスクリプトを実行すると scss/style.css のファイルを監視し、
変更があるたびに自動的にコンパイル済みの css/style.css に生成します。

スクリプトの実行

スクリプトを実行するには、次のコマンドを実行する必要があります。

npm run scss

これでファイルの監視がはじまり、変更があるたびに自動的にcssファイルにコンパイルされます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です