エラー調査:nuxt.jsでscssを使おうとしたら時期が悪かった件

  • こんばんは、小村だよ!

  • 今回はNuxt.jsでscssを使用しようとしたら詰まった話するよ!

  • もしかしたら参考になる人がいるかもしれないので、Qiita記事に残す予定です



想定読者

  • Nuxt.js SCSS などで検索してきた人

  • 下記エラーメッセージで検索してきた人

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/xxx/node_modules/sass-loader/dist/index.js:25:24)
  • 下記エラーメッセージで検索してきた人
node: ../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.



はじめに

  • この記事は、「Nuxt.jsで」「SCSSを使いたい」と考える人に向けて記載します

  • 現在こちらの環境構築時に結構な確率でつまづくと思われます

    • 私は3~4時間ほど溶けました
  • もしあなたがこの対象であれば、この記事は力になるかもしれません

  • なお、私はyarnコマンドにて動作を確認しております

    • npmコマンドは試していないため、間違いがあれば適宜修正してください



解決までの手順(解説は下でします)

1.SCSSの動作確認ができる環境を用意

  • [nuxt.config.js]に下記を記載
css: [
  { src: '~/assets/sass/app.scss', lang: 'scss' },
],
  • assetsフォルダ配下に[sass]フォルダを作成し、[app.scss]を作成

  • [app.scss]に下記を記載

body {
    background-color: #00F;
}
  • なお、scssを記述して動作確認できるならこちら以外でも問題ありません



2.Dart-Sassと最新のsass-loaderの組み合わせ

  • 下記を実行

  • 動かなければ次の項へ

# yarnの場合
$ yarn add -D sass fibers sass-loader
$ yarn dev

# npmの場合
$ npm install sass fibers sass-loader
$ npm run dev



3.Dart-Sassとsass-loader@10.X.Xの組み合わせ

  • 下記を実行

  • 動かなければ次の項へ

# yarnの場合
$ yarn remove sass fibers sass-loader
$ yarn add -D sass fibers sass-loader@^10.x.x
$ yarn dev

# npmの場合
$ npm uninstall sass fibers sass-loader
$ npm install sass fibers sass-loader@^10.x.x
$ npm run dev



4.Node-Sassとsass-loaderr@10.X.Xの組み合わせ

  • 下記を実行

  • 動かなければ次の項へ

※私はこちらで動きました

# yarnの場合
$ yarn remove sass fibers sass-loader
$ yarn add -D node-sass sass-loader@^10.x.x
$ yarn dev

# npmの場合
$ npm uninstall sass fibers sass-loader
$ npm install node-sass sass-loader@^10.x.x
$ npm run dev



5.動かなかった場合の後始末

  • 下記を実行(後始末)

  • ここまでで動かなければ別の要因と思われます。力になれずすみません

# yarnの場合
$ yarn remove node-sass sass-loader

# npmの場合
$ npm uninstall node-sass sass-loader



解説

1.scssの動作確認ができる環境を用意

  • scssの動作確認用の環境を用意します

  • 手っ取り早くNuxt.jsアプリの全てのVueに対してscssを適用しています

  • そのため、yarn devが実行され次第、scssが使えなければエラーを吐きます

  • scssが使えるようになりましたら、こちらの記述は消してもらえればと思います



2.Dart-Sassと最新のsass-loaderの組み合わせ

  • Nuxt.jsでScssを使う際、Sassを使用します。これには下記の種類があります

    • Dart-Sass
    • Node-Sass
    • Lib-Sass
  • そしてこのうち、Dart-Sassが公式で推奨され、Node-SassとLib-Sassは非推奨です

  • ですのでまず初めに、Dart-Sassを使用する方法を試しております。

  • Dart-Sassを使用する場合、下記パッケージが必要となります

    • sass
    • fibers
    • sass-loader
  • そして本項のコマンドを実行すると、私の環境では下記エラーが発生します

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/xxx/node_modules/sass-loader/dist/index.js:25:24)
  • 原因はsass-loaderのVer.11以上の使用に、webpackのVer.5以上が必要なためです

  • 2021年6月現在、sass-loaderの最新Ver.は12.1.0です。

  • また現在nuxt.jsアプリをcreate nuxt-appで作成した際のwebpackはVer.4以下です

  • そのため上記エラーが発生します

  • これを回避するために、次の項ではsass-loaderのバージョンを下げています



3.Dart-Sassとsass-loader@10.X.Xの組み合わせ

  • ではsass-loaderをVer.10以下で用意するとどうでしょうか

  • 私の環境では下記のエラーが発生します

node: ../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • これは、fibersを使用するのにnode.jsのVer.16が対応していないためです

  • もしnode.jsがVer.15以下であれば、こちらのコマンドでエラーが発生しない想定です

    • Dart-Sassが使えたなら、追加で設定が必要かもしれません。検索推奨(私は試せてないので…)
  • エラーが発生し、node.jsのVer.を下げられないのであれば、Dart-Sassを諦めます

    • もし諦めなくて済む方法があれば知りたい……
  • 次の項では、Dart-SassではなくNode-Sassを使用します



4.Node-Sassとsass-loaderr@10.X.Xの組み合わせ

  • Node-Sassによるscssの利用に必要なのは以下の通りです

    • node-sass
    • sass-loader
  • こちらのコマンドを実行すれば、おそらく皆使えるようになる想定です

  • ただし、いずれDart-Sassに乗り換える作業が発生すると思われます

  • Dart-SassとNode-Sassでは一部構文が異なるので、早めにDart-Sassに移行したいですね

  • もしもここまでで解決しない場合は、私では力になれません。申し訳ないです



参考にしたサイト



おわりに

  • 私が昨日エラー解決までに得た情報を1つにまとめました。いかがでしたでしょうか。

  • はやくDart-Sassを使用できたらと思います。非推奨設定なの気持ちわるい!

  • ではでは、皆様のお力になれれば幸いです。