Nuxt 3でSCSSを使う方法（Nuxt 3 RC4）

こんにちは。

Nuxt 3が安定版リリースに向けてRC版を公開しています。当サイトはNuxt 2を用いていますが、Nuxt 3を使った新バージョンへのリニューアル開発を始めました。今回は、Nuxt 3でSCSSを使う場合の指定方法を紹介します。Nuxt 2と変わっていますので参考になれば幸いです。

夏に正式版リリースのNuxt 3

Nuxt.jsは、Vue.jsアプリケーションでサーバーサイドレンダリングを可能にしてくれるフレームワークです（もっと色々できますが）。執筆時点での安定版最新バージョンは2.15.8ですが、現在全く新しいNuxt 3の開発が進んでいます。

Vue.jsがVue 3を公開してから、NuxtもVue 3の採用と同時にフルリニューアルが開始され、2021年10月にベータ版がリリースされました。今年の4月にはRC版（リリース候補版）が公開され、正式版（安定版）は今年の夏頃（公式では「Midsummer」表記）が予定されています。

当サイトはNuxt 2を用いて開発していますが、個人的にVue 3すら馴染みがない状態が続いておりいい加減勉強したほうがいいかなというのと、純粋に全く新しくなり使いやすく早くなったNuxt 3を体験したいということで、正式版より少し先取りしてNuxt 3 RC版を使ってサイトのリニューアル開発を始めました。この記事の内容は2022年6月13日リリースのv3.0.0-rc.4を利用したものです。正式版までに仕様が変更になる可能性がある点はご注意ください。

SCSSの読み込み方

CSSは便利な仕様がどんどん追加されていますが、ブラウザやフレームワーク側の対応を考えるとまだまだ素のCSSではできることが少ないです。そこでよく使われるのがSCSS（Sass）ですが、Nuxt 3ではscssファイルの読み込み方が変わりました。

Nuxt 3は軽量化を目的に必要最小限のファイルで起動できるようになっており、初期状態やインストール時の選択でSCSSを動かせるようにはなっていません。導入手順を紹介します。

ファイル構成

今回紹介する手順で使っているファイルとフォルダの構成です。

nuxt-app
├ assets
│└ styles
│　├ main.scss
│　└ _variables.scss
├ app.vue
└ nuxt.config.ts

assetsフォルダを作成し、その中に作成したstylesフォルダの中にscssファイルを置いていきます。色やフォントサイズなど共通で使う変数を入れた_variables.scssを用意し、main.scssなど実際のスタイル指定を書くファイルでそれを読み込む形でスタイルを適用していきます。

sassパッケージを導入する

Nuxt 3はインストール直後の状態ではSCSSを使うことはできません。一方で、Nuxt 2のときのようにパッケージをいくつもインストールする必要もありません。以下のコマンドを実行するだけです。

npm install sass --save-dev
# npm i sass -Dと同じ

nuxt.config.tsに設定を追加する

SCSSが使えるようになったら、assetsフォルダに置いたscssファイルをビルド時に使用するように設定を追加します。nuxt.config.tsファイルに次のように追記します。

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["@/assets/styles/main.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/styles/_variables.scss";',
        },
      },
    },
  },
});

cssオプションで、使用するscssファイルを配列形式で指定します。そしてそのそれぞれで読み込むパーシャルファイルはViteのオプションとして指定する必要があります。ViteはNuxt 3がwebpackに替わって採用したJavaScriptのビルドツールで、非常に軽快に動作します。そのビルドの際にSCSSのパーシャルファイルを読み込むようなオプションを指定するわけです。これで各SFC（単一ファイルコンポーネント）でSCSSやパーシャルファイルで定義した変数が使えるようになります。

ちなみにaddtionalDataの値の最後に;を入れないと[plugin:vite:css] expected newline.のようなエラーが起きます。scssファイルの先頭で@importするのと同じように書けばいいだけです。

Nuxt 3への期待

Nuxt 3はまだ触り始めたばかりで、軽快に動作するくらいしかそのありがたみを感じることができていません。一方で、Nuxt 3でできるようになることを見ただけでも当サイトをもっと良くできるというアイデアが浮かんでいます。

Nuxt 3はまだRC版の状態で、不具合や未対応の事項も多いです。公式の周辺ライブラリはまだ開発が続いている状態ですし、RC4になるまでNuxt 2ではできていたSSG（静的サイト生成）ができないという制限がありました。Windows環境では未だにnuxt generateでエラーが起きるようです（まだ試せていませんが）。私はWindows環境で当サイトを開発しており、WORKSページを除いてSSGを利用してサイトを公開しているので、正式版までにはしっかり対応してほしいところです。

というわけで今回は、Nuxt 3環境でSCSSを利用するための設定方法の紹介でした。Vue 3、Nuxt 3をしっかり勉強して、変な作り方をしないようにしたいです。当サイトのリニューアルにもご期待ください。

それではまた。

関連記事