Nuxt.jsでSassを使用した際に「TypeError: this.getOptions is not a function」とエラーが出る

以前投稿したNuxt.jsでSassを使用するの記事でも少し触れましたが、Nuxt.jsでSassを使用した際に「TypeError: this.getOptions is not a function」とエラーが出る状態に遭遇したので、対応方法をメモしておきます。

対応前

Nuxt.jsのプロジェクトを用意した後、Sassで使用するパッケージをインストールします。

npm install --save-dev node-sass sass-loader

この時点でnode-sassとsass-loaderのバージョンはそれぞれ以下になっています。

"node-sass": "^6.0.1",
"sass-loader": "^12.1.0"

通常だとこれで使用できるようになるのですが、Sassを記述して試してみると「TypeError: this.getOptions is not a function」というエラーが表示されました。

対応方法

調べてみると、sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようです。
webpackのバージョンを確認してみると、4.46.0でした。

npm list webpack

そのため、sass-loaderのバージョンを10に指定することでいったんは解消できるようです。
node-sassとsass-loaderをインストールし直します。

npm install --save-dev node-sass sass-loader@10

これで再度Sassの記述を試してみると、エラーは出なくなりました。

最終的なnode-sassとsass-loaderのバージョンはそれぞれ以下のようになりました。

"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"