開発環境
macOS: 10.15.7
node: 14.15.3
npm: 6.14.9
再現方法 (2021.03.02時点)
npx create-nuxt-app projectName-xxxx
上記で諸々をインストール後に、下記でscssに必要なパッケージをインストール
npm install --save-dev node-sass sass-loader @nuxtjs/style-resources
そしてvueファイルの
<style>
...
</style>
を、↓に書き換える
<style lang="scss">
...
</style>
そして、npm run dev
を実行すると下記エラー
ERROR Failed to compile with 1 errors friendly-errors 20:33:55
ERROR in ./pages/index.vue?vue&type=style&index=0&lang=scss& friendly-errors 20:33:55
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 20:33:55
TypeError: this.getOptions is not a function
at Object.loader (/Users/xxxx/node_modules/sass-loader/dist/index.js:25:24)
原因
Nodeと下記パッケージのバージョンがうまく噛み合っていないよう。
この段階でインストールされているパッケージのバージョンは↓
package.json
"node-sass": "^5.0.0",
"sass-loader": "^11.0.1",
解決方法
node-sass
とsass-loader
のバージョンを下げたらエラー解消した
解決方法の詳細
1. まずはnode-sass
のバージョンを下げてみる
npm uninstall --save-dev node-sass
でアンインストールして、
npm install --save-dev node-sass@4.14
でバージョン指定して再インストール
npm run dev
実行 → エラー解消せず(先述のエラー発生)
2. sass-loader
のバージョンも下げてみる
npm uninstall --save-dev sass-loader
でアンインストールして、
npm install --save-dev sass-loader@10.1.0
でバージョン指定して再インストール
npm run dev
実行 → エラー解消!!
所感
エラー解消してよかった〜
補足
今回のエラーに関しては、ググった感じでは他に起因するケースもあるようです。
本記事は原因の一つとしてご参考までにmm