【 更新 】おすすめ記事はこちら

Gulp

「gulp-sass 5」でコンパイルエラー！プラグインとコードを再設定する

3ヶ月ぶりに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:

  var sass = require('gulp-sass')(require('sass'));

メッセージによれば「sass」もしくは「node-sass」をインストールして、新しいコードに直すことで解決できるとのこと。

調べてみたところ「4.x」から「5.x」へのメジャーアップデートがあったようです。「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

バージョン5（5.0.0）の「gulp-sass」では「Node12もしくはそれ以上」のバージョンが必要なので、要注意ですね。作業前にご確認ください。

プラグインをインストール

「sass」もしくは「node-sass」 をインストールしましょう。今回は「sass」をインストールします。

npm i -D sass

「package.json」に「sass」が追加されていればOKです。

"devDependencies": {
  "gulp": "^4.0.2",
  "gulp-sass": "^5.0.0",
  "sass": "^1.37.5"
}

gulpfile.jsのコードを変更

「gulpfile.js」のコードを以下に変更します。

const sass = require('gulp-sass')(require('sass'));

エラーメッセージのように「var」から始めても問題ありません。

おわりに

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

今のところ、最近のバージョンアップエラーは「gulp-sass」のみ確認していますが、他もでてきそうですね。

公式サイトの最終更新が2年ほど前になりますが、以下もよく使うプラグインなのでご参考までに。

関連記事「gulp-imagemin」でエラー！不可逆圧縮はjpegtranを新しいコードに

メッセージと公式を確認しながら、地道に対応していきましょう！