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

少し前に使っていた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.
翻訳すると下記の通りです。
Sassコンパイラの設定
バージョン5では、gulp-sassにはデフォルトのSassコンパイラが含まれていないので、gulp-sassと一緒に1つ(node-sasかsass)をインストールする必要があります。
gulp-sassバージョン4より前のgulpfileを使用している場合は注意が必要です。
解決方法
まずはsassかnode-sassをインストールします。
npm install sass --save-devnpm 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'));これでコンパイルができるようになりました。

gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
CSSのカスタムプロパティ(変数機能)の使い方
Vue CLIのtitleタグやmetaタグの設定方法
効率的にHTMLを生成できるPugの特徴や記述方法
Visual Studio Codeの文字サイズやタブサイズの設定方法
Google Maps APIをローカル開発環境で使用するときの制限設定方法
Vue CLIでVue.jsの開発環境をセットアップするまでの流れ
HTTP/2が設定されているはずなのに、ブラウザ上でHTTP/1.1になってしまう場合はセキュリティソフトを確認
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
WordPress5.5のサイトマップ機能を無効にする
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ATOKで変換時に文章を指摘してくれる「校正支援」タブの設定項目
コーディング時にちゃんと意識したい複数語の連結方法一覧(キャメルケース・スネークケース・ケバブケース)
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
gzip圧縮をしてウェブサイトの表示スピードを上げる方法
カーソルハイライトや入力したキーの表示など、デモに便利な機能が使える「Mouseposé」
Default Folder X 6.3.1のFinderファイルドラッグ時にメニューからポップアップが出ないようにする
Visual Studio Codeで正規表現にマッチするか確認できる拡張機能「Regex Previewer」
Dashでドキュメント機能を無視して、スニペット検索だけする方法