node-sassでnode-sass-globbingを使う時の設定方法

node-sass-globbingとは

node-sass-globbingを使うと
globパターンを使えるようになるので

scss内で
@import "hoge/*.scss";
↑の用に記述するとhogeフォルダ内のscssファイルを全て見てくれるようになります。

main.scssなどのファイルを作り

// =====================================
// common
// =====================================

@import 'common/*.scss';

// =====================================
// variables
// =====================================

@import 'variables/*.scss';

// =====================================
// pc/foundation
// =====================================

@import 'foundation/*';
@import 'pc/foundation/*';

このように設定するとscssファイルが増えても修正する必要がないのでとても便利です。

gulpでの使い方はよく見ますが
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34
（gulpの場合はこちらの記事がすごくわかりやすいです）

npmでの使い方があまり載ってなかったので自分用のメモも兼ねています。

必要なパッケージをインストール

ひとまずnode-sassは必須なのでインストールします
npm i node-sass --save

そしてnode-sass-globbingもインストールします
npm i node-sass-globbing --save

インストール後package.jsonに記述をします。

package.jsonの記述方法

package.jsonのscriptsに以下の用に追加します。

"scripts": {
"build:sass": "node-sass --importer node_modules/node-sass-globbing/index.js -o 書き出すフォルダ/styles
}

node-sassに--importer node_modules/node-sass-globbing/index.jsを
追加することでnode-sass-globbingが使えるようになります。