Vueと共通

【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を導入したい方は
最後に簡単なやり方を紹介しているので
チェックしてください✨


そもそも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とは

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

webpackのバージョンを確認する

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以上を使わなければならない
ということです…🤔


解決方法(どちらか1つを選んでください)

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

node-sassを5.0.0以上にする

terminal

npm install node-sass@5.0.0


sass-loaderを10.1.1にダウングレードする

https://www.npmjs.com/package/sass-loader?activeTab=versions

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


まとめ

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

-Vueと共通
-,

© 2021 aLiz Nuxt