Nuxt.jsでscss導入しようとしたらエラッた

3357 ワード
node-sass Node.js scss npm sass-loader Node.js テキストリンク

開発環境

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 [email protected]でバージョン指定して再インストール

npm run dev 実行 → エラー解消せず（先述のエラー発生）

2. sass-loaderのバージョンも下げてみる

npm uninstall --save-dev sass-loaderでアンインストールして、
npm install --save-dev [email protected]でバージョン指定して再インストール

npm run dev 実行 → エラー解消！！

所感

エラー解消してよかった〜

補足

今回のエラーに関しては、ググった感じでは他に起因するケースもあるようです。
本記事は原因の一つとしてご参考までにmm

Boost.Python:継承の使用