Sass+globパターンの環境構築とコンパイルの覚書

これやっといてーと修正投げられたあるウェブサイトのスタイルはSassで書かれていました。基本Javaとかでサーバーサイドの私ですが、せっかくなのでSassの環境構築とコンパイル方法を学びました。この記事はその覚書で、Sassの詳細な利用方法や記法などは記載していません。

環境

• Node.js v9.4.0
• MacBook Air (13-inch, Mid 2012)
• macOS Sierra 10.12.6

Sassとglob

普通にコンパイルするとエラーになるので調べると、@import 'layout/**/*.scss';のようにglobパターンで複数のscssファイルがインポートがされていたためでした。Sassのデフォルトではサポートされていないようで、glob用のプラグインを利用する必要があるとのこと。

globについてはこちらで教えていただきました。
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34

メインのscssはこのような内容

style.scss

@charset 'utf-8';

// Utils
//-----------------------------------------------------------
@import 'utils/var';
@import 'utils/fonts';
@import 'utils/mixin';

// Base
//-----------------------------------------------------------
@import 'base/reset';
@import 'base/default';

// Layout
//-----------------------------------------------------------
@import 'layout/**/*.scss';

// Page style
//-----------------------------------------------------------
@import 'pages/**/*.scss';

環境構築

以上を踏まえて、参考記事にもあるNode.jsの「node-sass-globbing」というプラグインでglobパターンが使えるように、そしてコンパイラは必須の「node-sass」を利用します。

npmの初期設定

npm init -y

node-sassとnode-sass-globbingのインストール

npm install node-sass --save
npm install node-sass-globbing --save

コンパイル

作成されたpackage.jsonにコンパイルするためのscriptを追加します。（少し省略）
参考記事のコメントに書かれている通り、--importerオプションでnode_modules/node-sass-globbing/index.jsを指定するのがミソ。

package.json

{
  "name": "scss",
  "version": "1.0.0",
  "scripts": {
    "build": "node-sass --importer node_modules/node-sass-globbing/index.js -o dist style.scss"
  },
  "dependencies": {
    "node-sass": "^4.11.0",
    "node-sass-globbing": "0.0.23"
  }
}

コンパイル実行

npm run build

コンパイルに成功すると「dist」というディレクトリにcssが作成されます。
あとは、node-sassのオプションで
圧縮したり--output-style compressed、
ソースマップを作成したり--source-map true。

最後に

node-sassは結構高速な印象でした。Sass素敵。