想定読者
-
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コマンドは試していないため、間違いがあれば適宜修正してください
解決までの手順（解説は下でします）
１．SCSSの動作確認ができる環境を用意
- [nuxt.config.js]に下記を記載
css: [
{ src: '~/assets/sass/app.scss', lang: 'scss' },
],
-
assetsフォルダ配下に[sass]フォルダを作成し、[app.scss]を作成
-
[app.scss]に下記を記載
body {
background-color: #00F;
}
- なお、scssを記述して動作確認できるならこちら以外でも問題ありません
２．Dart-Sassと最新のsass-loaderの組み合わせ
-
下記を実行
-
動かなければ次の項へ
# yarnの場合
$ yarn add -D sass fibers sass-loader
$ yarn dev
# npmの場合
$ npm install sass fibers sass-loader
$ npm run dev
３．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
４．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
５．動かなかった場合の後始末
-
下記を実行（後始末）
-
ここまでで動かなければ別の要因と思われます。力になれずすみません
# yarnの場合
$ yarn remove node-sass sass-loader
# npmの場合
$ npm uninstall node-sass sass-loader
解説
１．scssの動作確認ができる環境を用意
-
scssの動作確認用の環境を用意します
-
手っ取り早くNuxt.jsアプリの全てのVueに対してscssを適用しています
-
そのため、yarn devが実行され次第、scssが使えなければエラーを吐きます
-
scssが使えるようになりましたら、こちらの記述は消してもらえればと思います
２．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のバージョンを下げています
３．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を使用します
４．Node-Sassとsass-loaderr@10.X.Xの組み合わせ
-
Node-Sassによるscssの利用に必要なのは以下の通りです
- node-sass
- sass-loader
-
こちらのコマンドを実行すれば、おそらく皆使えるようになる想定です
-
ただし、いずれDart-Sassに乗り換える作業が発生すると思われます
-
Dart-SassとNode-Sassでは一部構文が異なるので、早めにDart-Sassに移行したいですね
-
もしもここまでで解決しない場合は、私では力になれません。申し訳ないです
参考にしたサイト
おわりに
-
私が昨日エラー解決までに得た情報を１つにまとめました。いかがでしたでしょうか。
-
はやくDart-Sassを使用できたらと思います。非推奨設定なの気持ちわるい！
-
ではでは、皆様のお力になれれば幸いです。