Nuxt(Vue)を使用していたらsass-loaderが原因でエラーになったのでまとめてみた

#前提
エンジニア目指して勉強中の身です。Nuxt.jsを用いたポートフォリオ作成中、突然エラーになり苦戦したので、同じ境遇の方へ向けて記事としてまとめます。マサカリを投げていただきましたら、フォローいたします。

#開発環境
node: 16.13.1
npm: 8.1.2

#エラー

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/user_neme/Template/nuxtjs-boilerplate/node_modules/sass-loader/dist/index.js:25:24)

#原因
■1
まず、NuxtでSassを使うには

・node-sass
・sass-loader

2種類のパッケージが必要とのこと。

■2
sass-loaderの11.0.1を使うなら
node-sassの5.0.0以上を使わなければならない。
https://www.npmjs.com/package/node-sass

■3
サポートされているwebpackの最小バージョンが"5"であることが必須。
（詳細は参考より）

#解決
バージョンを合わせる。

npm install node-sass@5.0.0
npm install sass-loader@11.0.1

node-sassのみ変更の場合(5.0.0以上)

npm install node-sass@5.0.0

sass-loaderのみ変更の場合(10.1.1へダウングレード)

npm install sass-loader@10.1.1

###参考
https://note.com/aliz/n/n70a7a5f802df
https://mykii.blog/nuxt-update-sass-loader/
https://ma-vericks.com/nuxt-scss/

#まとめ
パッケージなど、とりあえず最新版にしてみたり、推奨なので問題ないでしょ、という考えは変えなくてはいけないと思いました。バージョンによる互換性など、調べてからアップグレードしていきたいと思います。

###余談
まとめてみるとシンプルだとわかるのですが、記事通りに実行しても(していない)エラーになったり、前提がわからなかったりと時間だけが過ぎていくことも少なくないです。改めて、闇雲に探すのだけは避けたい所存です。

先輩方が仰るよう、公式リファレンスから一次情報を得られることがベストだと思います。
https://nuxtjs.org/ja/releases/