エラー調査: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に乗り換える作業が発生すると思われます
もしもここまでで解決しない場合は、私では力になれません。申し訳ないです
参考にしたサイト
おわりに
私が昨日エラー解決までに得た情報を1つにまとめました。いかがでしたでしょうか。
はやくDart-Sassを使用できたらと思います。非推奨設定なの気持ちわるい!
ではでは、皆様のお力になれれば幸いです。