AMG Solution

【エラー解決方法】Nuxt.js で「Module not found: Error: Can’t resolve ‘sass-loader’ in ~」が発生したときの対処法

feels

こんにちは、樋口です。
 
今回は、Nuxt.jsでプロジェクト作成後にscssを使用しようとした際に、エラーとなった場合の対処法についてご紹介します。
※今回は「npm」コマンドを使用して説明を行います。

ソースコード

今回のエラーが発生するコードは下記ソースとなります。

エラー内容(Module not found: Error: Can’t resolve ‘sass-loader’ in ~)

ソースを実行した際に下記エラーが発生します。

Module not found: Error: Can’t resolve ‘sass-loader’ in ~

エラー発生時の環境

エラー発生時の環境は、下記の通りです。

Vue.js
3.9.2
Nuxt.js
2.12.2

エラー解決方法

今回のエラーの原因は、scssの使用を宣言していますが、nuxtに対象モジュールが認識されていないためとなります。そこで、下記コマンドを実行してnode-sassとsass-loaderを導入します。
 

npm install sass-loader node-sass –save-dev

追加エラー(TypeError: this.getOptions is not a function)

導入後まだ下記エラーが出ている場合は、以降の対応を行います。
 

 
sass-loaderのバージョンを下げます。
 

 npm install sass-loader@10.1.1


 
ダウングレードにより、エラーがなくなります。
 

 
これで無事、解決です。
 
 
 
 
《関連記事》

feels recruit

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

feelsでSFA・CRM
はじめました。
LOADING