😩

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

1 min read

これはなに

  • 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"
  },

結論

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