Nuxtのsass-loaderのをバージョンを上げたら動かなくなった

Contents

環境
何も考えず最新版にしたら動かなくなった
Nuxt公式では10系を指定
最後に

環境

nuxt 2.14.0
node.js 16.5.0
yarn 1.21.1

何も考えず最新版にしたら動かなくなった

Nuxt環境のボイラープレートのメンテをしていて、sassとsass-loaderを何も考えずに最新バージョンにアップデートしたらターミナルでエラーを吐かれました。

 ERROR  Failed to compile with 1 errors


 ERROR  in ./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true&

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)

 @ ./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true& 4:14-519 14:3-18:5 15:22-527
 @ ./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

このときのそれぞれのバージョンは下記です。

sass 1.35.2
sass-loader 12.1.0

どうやらsass-loaderが対応していない様子です。

Nuxt公式では10系を指定

2021年7月22日現在のNuxtの公式ドキュメントを確認すると、sass-loaderに関しては10系でバージョンを指定しているようで、この通りにインストールすると無事に解決しました。

yarn add -D pug pug-plain-loader
yarn add -D sass sass-loader@10 fibers

最後に

やはりなにかあったらまずは公式ドキュメントですね！