【Nuxt.js】scssを使用できるようにする方法

Nuxt SCSS

インストール方法

(1)ライブラリをインストールする。

npm i -D sass sass-loader fibers

(2)nuxt.config.jsを編集する。

import Sass from 'sass';
import Fiber from 'fibers';

export default {
  ...
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber,
        },
      },
    },
  },
};

エラー発生時の対応方法

アプリ起動時にエラーTypeError: this.getOptions is not a functionが発生した場合

  • sass-loaderのv11.0.0以降は、webpackのv5以降が必要。
  • そのため、nuxtで使用しているwebpackのバージョンを確認し、webpackのv5より以前のバージョンであれば、sass-loaderのバージョンも下げる。
# インストールされているnuxtのバージョンで使用されているwebpackのバージョンを調べる。
npm list webpack
nuxt-sample@1.0.0
└─┬ nuxt@2.15.8
  └─┬ @nuxt/webpack@2.15.8
    └── webpack@4.46.0

# 使用されているwebpackのバージョンがv5より前の場合、sass-loaderのバージョンをv10に下げることでエラーが解消する。
npm i -D sass-loader@10

github.com