11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-02

開発環境

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-sasssass-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

11
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?