Dart Sassの@useでファイルをまとめて読み込む

以前にgulp-sassでDart Sassを使用する記事を投稿しましたが、この環境の@useで複数のSassファイルをまとめて読み込む方法を試してみます。

サンプルコード

Dart Sassに移行する前の@importではgulp-sass-globを使用していましたが、@useでは使用できません。
かわりにgulp-sass-glob-use-forwardというパッケージを使用します。

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

gulpfile.jsのSassの設定に追記します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const bulkSass = require('gulp-sass-glob-use-forward');
 
gulp.task('sass', function () {
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(bulkSass())
  .pipe(sass.sync({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('css/'));
});

layoutディレクトリを作成して、テスト用にいくつかSassファイルを追加します。
_src/sass/layout/_footer.scss

.l-footer {
  background: blue;
}

_src/sass/layout/header/_header.scss

.l-header {
  background: red;
}

_src/sass/layout/header/_nav.scss

.l-header-nav {
  background: orange;
}

_src/sass/style.scssでlayoutディレクトリ内をまとめて読み込みます。

@use "layout/**";

コンパイルを行うと、各ファイルを読み込めていることを確認できました。

.l-footer {
  background: blue;
}

.l-header {
  background: red;
}

.l-header-nav {
  background: orange;
}

別ディレクトリにCSSを出力する場合

基本的には前述の設定で問題なさそうだったのですが、複数のCSSファイルを別ディレクトリに出力したい場合にうまく出力できないようでした。
例として、サイト全体で使用するCSSをassets/css/style.cssに、LPでのみ使用するCSSをlp/css/style.cssに出力したいという想定で試してみます。

まずはgulpfile.jsのsrc()とdest()のパスを変更します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const bulkSass = require('gulp-sass-glob-use-forward');

gulp.task('sass', function () {
  return gulp.src(['./_src/**/*.scss', '!./_src/**/_*.scss'])
  .pipe(bulkSass())
  .pipe(sass.sync({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('./'));
});

各CSSファイルで使用するSassファイルを用意します。
まずはassets/css/style.cssです。
_src/assets/css/layout/_footer.scss

.l-footer {
  background: blue;
}

_src/assets/css/layout/header/_header.scss

.l-header {
  background: red;
}

_src/assets/css/layout/header/_nav.scss

.l-header-nav {
  background: orange;
}

_src/assets/css/style.scss

@use "layout/**";

次にlp/css/style.cssです。
_src/lp/css/layout/_footer.scss

.l-footer {
  background: green;
}

_src/lp/css/layout/_nav.scss

.l-header-nav {
  background: purple;
}

_src/lp/css/style.scss

@use "layout/**";

これで各ファイルの出力自体はできたのですが、@useでの読み込みがうまくいっておらず、ファイルの中身が空になっていました。

色々と試してみた結果、src()で指定したパスの直下に@useを使用するSassファイルがないとうまくいかないようでした。
例えばgulpfile.jsでのパスを以下のようにした場合、assets/css/style.cssは中身も含めて正しく出力されました。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const bulkSass = require('gulp-sass-glob-use-forward');

gulp.task('sass', function () {
  return gulp.src(['./_src/assets/css/**/*.scss', '!./_src/**/_*.scss'])
  .pipe(bulkSass())
  .pipe(sass.sync({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('./assets/css/'));
});

CSSにまとめるファイル(先頭に「_」の付いていないSassファイル)毎に個別に設定するようにしてみます。
変換前のファイルパスを取得するため、globuleを追加します。

npm install globule --save-dev

gulpfile.jsを下記のように変更します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const bulkSass = require('gulp-sass-glob-use-forward');
const globule = require('globule');

gulp.task('sass', function (cd) {
  // ベースのSassファイルのパスを取得
  const basePaths = globule.find({
    src: ['./_src/**/*.scss', '!./_src/**/_*.scss']
  });

  // パス毎にCSSへのコンパイルを実行
  for (const basePath of basePaths) {
    // 出力先パスの生成
    let destPath = basePath.replace('_src/', '').split('/');
    destPath.pop();
    destPath = destPath.join('/');

    gulp.src(basePath)
      .pipe(bulkSass())
      .pipe(sass.sync({
        outputStyle : 'expanded'
      }))
      .pipe(gulp.dest(destPath));
  }
  cd();
});

これでコンパイルを行うと、各ファイル想定した形で出力できました。
assets/css/style.css

.l-footer {
  background: blue;
}

.l-header {
  background: red;
}

.l-header-nav {
  background: orange;
}

lp/css/style.css

.l-footer {
  background: green;
}

.l-header-nav {
  background: purple;
}