.vueファイルの中にscssを書きたくてsass-loaderいれたが、すごくerrorが出る件

これはなに

• Nuxt.jsを書いていて、sassを入れようとした
• Errorになるので調べた
• 反省記事

誰が読む

• 主に思い出したような自分

scopedでsassを書こうとした

• 普通に書くと、怒られた

答え

• .vueファイルの中でscssを使うなら、node-sassとsass-loaderを入れる必要がある

【Vue.js】.vueファイルの中にscssを書きたい！

node-sassとsass-loaderを入れたら、エラーが出た

ERROR  in ./components/footer.vue?vue&type=style&index=0&id=fad11dd4&lang=scss&scoped=true&　friendly-errors 12:36:15

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 　friendly-errors 12:36:15
TypeError: this.getOptions is not a function
    at Object.loader (/Users/taz/taz-fyi/node_modules/sass-loader/dist/index.js:25:24)

答え

【Nuxt.js】Sassのバージョンに注意！
どうやらパッケージ同士の相性が悪いらしい。
パッケージを最新からバージョンダウンした。

  "dependencies": {
    "core-js": "^3.9.1",
    "node-sass": "^5.0.0",
    "nuxt": "^2.15.3",
    "sass-loader": "10.1.1"
  },

結論

• 違う方法をすべきだった