gulp buildのエラーについて

Question

sassを学習しようと、オンライン調べながら環境設定を行い、
実際にscssを記述して、cssに変換しようと、ターミナルでgulp buildをコマンドした際にエラーが出てしまいます。

###ターミナルのエラーは下記の通りです。

[11:36:54] Starting 'build'...
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'));

[11:36:54] The following tasks did not complete: build
[11:36:54] Did you forget to signal async completion?

###gulpfile.jsの記述は下記の通りです。

'use strict'

var { src, watch, dest, series } = require('gulp');
var sass = require('gulp-sass');

const sassBuild = (done) => {
src('./_src/sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(dest('./css'));
done();
};

const watchScss = () => {
watch('./_src/sass/**/*.scss', sassBuild);
};

exports.default = series(sassBuild, watchScss);
exports.build = sassBuild;

---

プログラミングの知識やその他付随した知識は全くありません。全くの初心者です。
sassを使いたいと思い、ネットで調べながら環境設定にチャレンジしておりました。
このような質問の仕方で大丈夫でしょうか？

なぜこのようなエラーが出てしまうのか？
どうしたら解決出来るのか？ご教示ください。

何卒よろしくお願いいたします。

Answer 1

gulp-sass v5の場合gulp-sassをインストールしてもsassコンパイラ本体はインストールされないため別途各自でインストールする必要があります。
sassコンパイラはnode-sass(LibSass)とsass(DartSass)があります(過去にはRubySassというのもありました)が、node-sassは非推奨となった為、特に理由がなければsassを使います。
sassのインポート部分を以下のようにすると使えるはずです。

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

質問の際はgulp,gulp-sassなどのパッケージのバージョン情報の記載をお願いします。(今回はエラー文でわかりましたが)
また、エラー文はコードブロックに入れると大変読みやすくなりますのでお願いします。

Comments

[stowe]

なんとお礼を申し上げたらいいのか・・・。泣
何時間も悩んで、何回も調べてもさっぱりだったのが、ka2obushi様のお答えを元に実行しましたらきちんとstyle.cssのコンパイル？？通常のcssの書き方で書き出してくれました。

私の不明瞭な書き方で分かりづらい質問をしたのにも関わらず、ご丁寧にお答えいただき、本当に本当にありがとうございます。
ものすごく嬉しくて泣きそうです。

今後はご指摘頂いた通り不備のないように質問いたします。

この度は本当にありがとうございました。
本当に助かりました。

Answer 2

突然割り込んできてすみません！私も全く同じ問題に衝突しております。
ターミナルのエラー、gulpfile.jsの記述も全く同じです。

ka2obushiさんの仰る通りに、私もエラーの改善に挑みました。しかし、上手くいきませんでした…

'use strict'

var { src, watch, dest, series } = require('gulp');
// var sass = require('gulp-sass')　訂正前;
var sass = require('gulp-sass')(require('sass'));　//訂正後

const sassBuild = (done) => {　//以下同文です
 

この訂正の仕方で合っていますでしょうか？訂正後にgulp buildを記述しても同じエラーが繰り返されてしまいます。

私の場合、$ npm install --save-dev gulpを記述した際に、このようなエラーメッセージ？が表示されるのですが、こちらが原因なのでしょうか？改善方法を教えていただけたら幸いです。

$ npm install --save-dev gulp

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> fsevents@1.2.13 install /Users/ユーザー名/Desktop/sass/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN sass@1.0.0 No description
npm WARN sass@1.0.0 No repository field.

+ gulp@4.0.2
added 327 packages from 227 contributors and audited 327 packages in 15.613s

7 packages are looking for funding
  run `npm fund` for details

found 3 vulnerabilities (1 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

Comments

[stowe]

コメントありがとうございます。

当然の如く私の知識ではアドバイスなんて出来るはずもなく・・・（泣）
こちらの回答にお返事がつくのをお待ちいただくのも手ですが、ご自身で質問された方がいいかもしれません。

[kengo.1214]

お返事ありがとうございます。
今回teratailを利用するのが初めてで、ka2obushiにもこのメッセージが届くと勘違いしておりました。stoweさんに送ってしまい大変失礼しました。stoweさんの仰る通り私自身で質問することにしました。

今回は、ややこしいメッセージを送ってしまい申し訳ございませんでした。