お知らせ
2023.12.5(Tue)
技術
2021.8.25(Wed)
【エラー解決方法】Nuxt.js で「Module not found: Error: Can’t resolve ‘sass-loader’ in ~」が発生したときの対処法
目次
こんにちは、樋口です。
今回は、Nuxt.jsでプロジェクト作成後にscssを使用しようとした際に、エラーとなった場合の対処法についてご紹介します。
※今回は「npm」コマンドを使用して説明を行います。
ソースコード
今回のエラーが発生するコードは下記ソースとなります。
<template>
<div class="container">
<span>test</span>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.container {
width: 100%;
height: 100%;
&__test {
font-size: 20px;
}
}
</style>
エラー内容（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
ダウングレードにより、エラーがなくなります。
これで無事、解決です。
《関連記事》
ITエンジニアリング事業部 リーダー
I.Higuchi
技術を中心に、言語の入門編や便利なライブラリ紹介など、技術のお役立ち情報をご紹介します。
MOST VIEWED ARTICLES
よく見られている記事
