【gulp】@importを使って配下のscssファイル一括読み込み

一つずつ@importを使って読み込もうとしたら「gulp-sass-glob」が必要だった時の備忘録

@importを使った一括scssファイルの読み込みをする方法

既にgulpが使えている前提
こんな感じの書き方したい

// components配下のscssファイル読み込む例（これを書くファイルは「components」と同じ階層）
@import "components/**";

まず、「gulp-sass-glob」をインストール

npm install gulp-sass-glob --save-dev

gulpfile.jsに2行追加（書き方参考例）

…
const sass = require("gulp-sass")
↓こいつを追加
const sassGlob = require("gulp-sass-glob")
…

…
gulp.task("scss", () =>
  gulp
    .src(`./scss/entries/**/*.scss`)
    ↓こいつを追加
    .pipe(sassGlob())
    .pipe(…
    …

これで

@import "components/**";

みたいな書き方できる

おまけ

「@import」でまとめることはできても、「@import」で読み込むファイルも「@import」をしていると上手く動かなかった
「@import」の入れ子はできないって言うのかな？動かなかった