gulp-sass-globでパーシャルファイルを読み込み

2021.03.16

sassコンパイル時、コンポーネントごとに細分化されたパーシャルファイルは、読み込み元のscssファイルから@importを利用して読み込みます。以下の例ではlayout.scssで3つのパーシャルファイルを読み込みます。

//layout.scss
@charset "UTF-8";

@import "page/_access.scss";
@import "page/by/_access_train.scss";
@import "page/by/_access_bus.scss";

gulpでsassをコンパイルすると、以下のようにlayout.cssが書き出されます。ソースはlayout.scssで読み込んだファイルの順番通りになっています。なお書き出されるのはlayout.cssのみで、アンダーバーの付いたパーシャルファイルのcssは書き出されません。

//layout.css
.p-access {
  text-align: center;
}

.p-access-ttl {
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}

@importでパーシャルファイルを読み込む際に、gulp-sass-globを利用します。以下を実行してgulp-sass-globをインストールします。

//gulp-sass-globのインストール
npm install gulp-sass-glob

gulpfile.jsにgulp-sass-globの処理を追加します。gulp-sass-globの実行はgulp-sass実行の前にする必要があります。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');  //gulp-sass-globの読み込み

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(sassGlob())  //gulp-sass-globの実行
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

gulp.task('default', styles);

これでgulp-sass-globが利用できるようになりました。layout.scssを修正します。@import "page/**";のように記述すると、対象ディレクトリ以下の全てのパーシャルファイルが読み込めます。

//layout.scss
@charset "UTF-8";

@import "page/**";

gulpでsassをコンパイルすると、以下のようにlayout.cssが書き出されます。注意点としてgulp-sass-globのパーシャルファイル読み込みは、ファイル名が数字・アルファベット順です。そのためlayout.cssのソースも読み込んだファイルの順番通りになります。

//layout.css
.p-access {
  text-align: center;
}

.p-access-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}