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 使っとけ！ ってことかな。
↧