[Nuxt.js] Node.js 16 時代の Sass の利用方法

Nuxt.js での Sass(SCSS) の利用については毎回苦しめられるのですが、 Node.js バージョン 16 の環境でもひと癖あったのでメモします。

🏹 TL;DR

素直に Nuxt 3 使っとけ

公式でベータ版になった Nuxt3 には、とくに設定などなく Sass(SCSS) を利用できる環境が備わっています。

抵抗がなければ Nuxt 3 使うのがベター。

Nuxt 2 を使う場合

リリース済みのアプリなど Nuxt 2 で Sass(SCSS) を利用しないと行けない場合は、次の手順です。

$ yarn add -D sass sass-loader@10

でインストールして、

nuxt.config.js

export default {
  css: [ '~/assets/scss/style.scss' ],
}

ですね。

個人的には fibers 使いたいところなんですけど、こいつも Node.js 14 止まりなので、アップデートされたら記事もリライトするかもしれません。

💡 Node.js 14 環境では

fibers のことに触れたので、 Node.js 14 環境下の設定も書いておきます。

まずインストール。

$ yarn add -D sass fibers

※もし node-sass がある場合は次のコマンドで消しておきましょう

$ yarn remove node-sass

んでもって、 nuxt.config.js にこうですね。

nuxt.config.js

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

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

🍟 まとめ

Nuxt 2 での Sass(SCSS) の取り扱いって何かと厄介なイメージ。

やっぱり、素直に Nuxt 3 使っとけ！　ってことかな。