LibSass から Dart Sass への移行はもうお済みですか？

LibSass のサポートは2022年10月1日で終了予定とのこと。

One year after this deprecation goes into effect (1 October 2022 at latest), we will drop support for @import and most global functions entirely. This will involve a major version release for all implementations.

というわけで、やっと重い腰を上げ、Dart Sass への移行を済ませました。

その際、パーシャルファイルの glob でハマったので、解決方法を投稿しておきます。

ディレクトリ構造

glob の確認用のサンプルのディレクトリ構造は以下となります。

/src/sass/layout/ フォルダ内のパーシャルファイルを glob を利用して読み込ませます。

project
├ node_modules
├ src
│ ├ css
│ │ ├ hoge
│ │ │ └ style.css
│ │ └ style.css
│ └ sass
│   ├ layout
│   │ ├ _header.scss
│   │ └ _footer.scss
│   ├ hoge
│   │ └ style.scss
│   └ style.scss
├ gulpfile.js
├ package-lock.json
└ package.json

npm パッケージのインストール

gulp を利用した Sass のコンパイルに必要な以下パッケージをインストールします。

glob を利用するためには gulp-sass-glob-use-forward が必要となります。

npm i --D gulp gulp-dart-sass gulp-sass-glob-use-forward

package.json

package.json

{
  "name": "sass-compile",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-dart-sass": "^1.0.2",
    "gulp-sass-glob-use-forward": "^0.1.3"
  }
}

gulpfile.js

gulpfile.js

const gulp = require('gulp')
const gulpDartSass = require('gulp-dart-sass')
const sassGlob = require('gulp-sass-glob-use-forward')

const sass = () => {
  return gulp
    .src('src/sass/**/*.scss')
    .pipe(sassGlob())
    .pipe(gulpDartSass())
    .pipe(gulp.dest('src/css'))
}
exports.sass = sass

問題点

sass ディレクトリ直下からは読み込めましたが、
子階層からの読み込みができず空の css ファイルが出力されてしまいました。

/src/sass/style.scss

// 読み込めた
@use "layout/*";

/src/sass/hoge/style.scss

// 読み込めない
@use "../layout/*";

解決方法

gulp-dart-sass の includePaths オプションに sass のルートディレクトリを指定することで子階層からも読み込むことができました！

gulpfile.js

const gulp = require('gulp')
const gulpDartSass = require('gulp-dart-sass')
const sassGlob = require('gulp-sass-glob-use-forward')

const sass = () => {
  return gulp
    .src('src/sass/**/*.scss')
    .pipe(sassGlob())
-   .pipe(gulpDartSass())
+   .pipe(gulpDartSass(
+      includePaths: ['src/sass'],
+   ))
    .pipe(gulp.dest('src/css'))
}
exports.sass = sass

/src/sass/style.scss

@use "layout/*";

/src/sass/hoge/style.scss

- @use "../layout/*";
+ @use "layout/*";