【Nuxt.js】Sassのバージョンに注意！

前置き

ここ1週間で
Sassが使えなくて困っている😖💦
って方いらっしゃいますよね…！？

こんなエラーが出ますよね…！？！？

Error

[Vue warn]: Error in beforeCreate hook: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

TypeError: this.getOptions is not a function

at Object.loader (/Users/yoshiko/udemy/node_modules/sass-loader/dist/index.js:25:24)"

実は私も手こずりました。。。
しかし！！
解決方法を見つけたのでご紹介します💕

新しくSassを導入したい方は
最後に簡単なやり方を紹介しているので
チェックしてください✨

そもそも
NuxtでSassを使うには
node-sass
sass-loader
2種類のパッケージが必要です。

で、普通にインストールすると
冒頭のようなエラーが出ました。

sass を利用したい場合は node-sass と sass-loader パッケージをインストールしてください。
https://ja.nuxtjs.org/docs/2.x/features/configuration/#pre-processors

@nuxtjs/style-resourcesは
変数を使いたい場合のみなので
ここでは触れません。

まずは原因の確認をしましょう。

GitHubのRelease情報を見てみると…
丁度1週間前に新しいバージョンが
リリースされているではありませんか！！

そして大事なのは
サポートされているwebpackの
最小のバージョンが5
ということです！！！💥

4以下はダメです。。。

BREAKING CHANGES
minimum supported webpack version is 5
https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0

ではそのwebpackが何かというと…
npmでinstallするもの
つまりnuxt, vueとかnode-sass

node-sass
sass-loader
2つをインストールしてから
package.jsonを見てみましょう👀

nuxtは最新バージョンが2.14.12なので
今回は関係ないですね。
https://ja.nuxtjs.org/docs/release-notes/

となるとnode-sass
こちらが4.14.1です。
node-sassには5.0.0が出ています。
https://www.npmjs.com/package/node-sass

つまりsass-loaderの11.0.1を使うなら
node-sassの5.0.0以上を使わなければならない
ということです…🤔

インストールでバージョン指定をするか
もしくはpackage.jsonのバージョンを書き換えます✍️

terminal

npm install node-sass@5.0.0

terminal

npm install sass-loader@10.1.1

最初からバージョンを指定して
インストールしましょう✨🙆‍♀️

⬇️バージョンを古い方に合わせる

terminal

npm install node-sass@4.14.1
npm install sass-loader@10.1.1

または

⬇️バージョンを最新に合わせる

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

今まで出来ていたことが
エラーになってしまった場合、
リリース情報を見て
サポートしているバージョンを
確認するのは大事ですね✨👀