【Vue】VueのプロジェクトでSassを使用した際の「TypeError: this.getOptions is not a function」対応

環境

• Vue 2.6.1

• webpack 4.46

事象

Vuetifyを導入するためにSassをnpmインストールしたところ、下記のようなエラーが発生。

 ERROR  Failed to compile with 1 error                                                                                     

 error  in ./node_modules/vuetify/src/styles/main.sass

Syntax Error: TypeError: this.getOptions is not a function

Sassのバージョン

  "sass": "~1.40",
   "sass-loader": "^12.3.0",

sass-loaderのレポジトリを参照すると、sass-loader11以降webpackのバージョンが5系出ないとサポート対象外とのこと。

⚠ BREAKING CHANGES
minimum supported webpack version is 5

github.com

なので、sass-loaderのバージョンを以下コマンドで下げます。

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

package.jsonのバージョンが変更されていることを確認。

 "sass": "~1.40",
  "sass-loader": "^10.2.0",

こちらの対応で表題のエラーは解消されました。

参考

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