gulp-sass 5の「does not have a default Sass compiler」エラーを解消する

2022年2月8日

少し前に使っていたgulpのファイルで、gulp-sassのバージョンが古かったのでアップデートを行ったところ、下記のエラーが出ました。

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself. 
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

訳すと「gulp-sass 5」のバージョンアップに伴うエラーのようです。

「gulp-sass」プラグインのエラー
エラー内容：

「gulp-sass 5」 にはデフォルトのSassコンパイラがないので、自分で設定してください。
パッケージは「sass」と「node-sass」両方使えます。
参考までに、gulpfile.jsでは下記のように記述します。

原因

gulp-sassのバージョン5からは、デフォルトのSassコンパイラが含まれなくなったようです。

そのため、別途自分でsassかnode-sassのどちらかをインストールして、gulp-sassと一緒に読み込むように設定が必要になったようです。

gulp-sass version 5 requires Node 12 or later, and introduces some breaking changes. Additionally, changes in Node itself mean that we should no longer use Node fibers to speed up asynchronous rendering with Dart Sass.
Setting a Sass compiler
As of version 5, gulp-sass does not include a default Sass compiler, so you must install one (either node-sass or sass) along with gulp-sass.
gulp-sass – npm

翻訳すると下記の通りです。

Sassコンパイラの設定
バージョン5では、gulp-sassにはデフォルトのSassコンパイラが含まれていないので、gulp-sassと一緒に1つ（node-sasかsass）をインストールする必要があります。

gulp-sassバージョン4より前のgulpfileを使用している場合は注意が必要です。

解決方法

まずはsassかnode-sassをインストールします。

npm install sass --save-dev

npm install node-sass --save-dev

今まではgulp-sassを読み込んでそのまま使っていました。

// gulp-sass 4以前
const sass = require('gulp-sass');

それをsassまたはnode-sassも一緒に読み込むようにします。

// gulp-sass 5（sassの場合）
const sass = require('gulp-sass')(require('sass'));
// gulp-sass 5（node-sassの場合） 
const sass = require('gulp-sass')(require('node-sass'));

これでコンパイルができるようになりました。