node-sass を使ってみよう（ npx コマンドを使ったパッケージの実行）

sass で記述したファイルから css を生成するため node-sass パケージを使用してみます。 npm のバージョン 5.2.0 で導入された npx コマンドを使うことでローカルにインストールしたパッケージを実行することができます。

対象： npm 5.2.0 以降

準備

はじめに、次のディレクトリ構造で作業を進めたいと思います。プロジェクトフォルダーの配下に出力先の public フォルダー、 scss で記述し作業を行う src フォルダーを作成しています。

projects
  |- blueleaf      // プロジェクトフォルダー
      |- public
      |   |- assets
      |       |- css
      |- src
      |   |- css
      |       |- style.scss     // scss ファイル

src\css フォルダーに style.scss ファイルを作成し SCSS 記法でスタイルシートを作成していきます。ここでの例は、次のように変数を宣言し簡単なスタイルの定義を作成しています。

$_color-text: #333 !default;

$_base-font-size-px: 16px !default;

* {
  box-sizing: border-box;

  &:before, &:after {
    box-sizing: inherit;
  }
}

html, body,
p, ol, ul, li, dl, dt, dd, table,
blockquote, figure, fieldset, legend, pre, iframe, hr,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

html {
  font-size: $_base-font-size-px;
}

body {
  color: $_color-text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

style.scss が作成出来たら src/css フォルダーに保存し、次のコマンドを実行します。このコマンドは、 node-sass パッケージを使って scss ファイルから css ファイルを生成するコマンドになります。

npx node-sass src/css/style.scss public/assets/css/style.css

エラーなくコマンドが実行されると、 public/assets/css フォルダーに次のような style.css が作成されます。変数部分が置き換わり css が作成されていることが確認できます。

* {
  box-sizing: border-box; }
  *:before, *:after {
    box-sizing: inherit; }

html, body,
p, ol, ul, li, dl, dt, dd, table,
blockquote, figure, fieldset, legend, pre, iframe, hr,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

html {
  font-size: 16px; }

body {
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

圧縮して css を出力する

無駄な改行や空白を削除して css を作成することを圧縮といいます。 node-sass パッケージでは、 output-style オプションを指定することで圧縮した状態の css を生成することができます。

npx node-sass src/css/style.scss public/assets/css/style.css --output-style compressed

scss ファイルが変更されたら css を生成する

scss ファイルが更新されたら css ファイルを自動的に生成するには、「-w」か「–watch」オプションを付けて node-sass を実行します。

npx node-sass src/css/style.scss public/assets/css/style.css --watch

scss ファイルの内容を更新すると自動的に css ファイルが更新されることを確認できます。

ファイルの更新を常に見ているためプロセスが立ち上がったままになります。終了するには、「Ctrl + C」 で処理を終了させます。