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'));これでコンパイルができるようになりました。

ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
Visual Studio Codeで複数ファイルを編集するときにタブやペインの操作方法
Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
SourceTreeのカスタムアクションを使って差分ファイルだけをまとめる方法
Backlogで2段階認証を設定後、SourceTreeでアカウントエラーが発生する場合の対処法
効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本
JetpackでのError during WebSocket handshakeの解決方法
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方|Dart Sass入門
CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Bartender 4の「Show for Updates」機能で、特定条件でメニューアイコンが表示されるようにする
「epel-release」インストール後にyum installで「Cannot retrieve metalink for repository」と表示される場合の対処法
Alfred 4のターミナル機能で実行されるアプリをiTerm2に変更する方法
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
さまざまな情報を一元管理するオールインワンのワークスペース「Notion」
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
Google Chromeの別ユーザーへの切り替えを簡単に行うKeyboard Maestroマクロ
iTerm2でさらに細かい機能の設定ができる環境設定の「Advanced」タブ
Macで複数ディスプレイを使っている場合に便利な設定集
ウェブのGoogle Drive上でコピーアンドペーストのショートカットキーが使えるように!