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 – npmgulp-sass
does not include a default Sass compiler, so you must install one (eithernode-sass
orsass
) along withgulp-sass
.
バージョン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年ほど前になりますが、以下もよく使うプラグインなのでご参考までに。
メッセージと公式を確認しながら、地道に対応していきましょう!