【Webpack】【脱Gulp】Sass-loaderの導入でエラーがでた

UdemyのWebpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座を受講中。今ようやくPugが終わってSass-loaderの導入まで進みました。

node-sassが非推奨になったので、代わりに下記の組み合わせでnpm installする必要があるとのことで

sass@1.49.9
sass-loader@12.4.0

installして、npx-webpack-dev-serverでローカルサーバを立ち上げてみたけれど

    TypeError: this.getOptions is not a function

こんな感じのエラーが出てしまいました。
すべてのモジュールのバージョンが合っていて、npmのバージョンも合わせてみたけどエラーは変わらず。

対策

調べてみたところ、sass-loaderのv11以降はwebpack5でしか対応していないそうです。
教材はwebpack4だったので、v12以降のsass-loaderは動かないわけですね。

というわけで、sass-loaderのバージョンをv10に落として再インストールします。

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

再度npx-webpack-dev-serverでローカルサーバーを立ち上げたところ、無事エラーも出、LiveReloadも行うことができました。