Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法

Nuxt.jsでグローバルにスタイルを適用する方法を紹介します。

結論から言うと、assetsに置いたCSSファイルのパスをnuxt.configのcss配列に書くだけです。Nuxt 2でもNuxt 3以降でもcssオプションの書き方は同じで、.cssだけでなく.scssも拡張子から判別して読み込まれます（SCSSの場合はsassのインストールが別途必要です）。

Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法

複数のレイアウトがある場合でも、bodyやhtmlにかけるスタイリングなど共通のものがあるなら、一箇所でまとめてスタイリングできると便利です。
そのために、assetsフォルダに作成したcssファイルにその内容をまとめて適用させます。

ディレクトリ構造

ディレクトリ構造は次の通りです。

assetsフォルダの中にstylesフォルダを作成して、その中にmain.cssを作成しています。

assets/styles/main.cssを作成する

main.cssには適用したい内容を記述します。

body {
  padding: 0;
  margin: 0;
}

nuxt.config.jsに記述する

  css: [
    '~/assets/styles/main.css'
  ],

nuxt.config.jsの中にcssの項目があるので、その[]の中に作成したcssファイルのpathを記述するとグローバルに適用できます。

Nuxt 3以降（nuxt.config.ts）の書き方

Nuxt 3以降では設定ファイルがnuxt.config.tsになり、defineNuxtConfig()の中に書きます。cssオプション自体は同じです。

export default defineNuxtConfig({
  css: [
    '~/assets/styles/main.css',
    // SCSSを使う場合（npm i -D sass が必要）
    // '~/assets/styles/main.scss',
  ],
})

ここに並べたファイルはすべてのページで読み込まれます。逆に、特定のページやコンポーネントだけに効かせたいスタイルはcssに入れず、そのコンポーネントの<style scoped>に書き分けると管理しやすくなります。

反映されないときの確認点

設定を書いても反映されない場合は、次の3点を確認してください。

• パスの先頭が~/（プロジェクトルート）になっているか。./assetsのような相対パスは解決されません。
• ファイル名と拡張子が一致しているか。main.scssを指定しているのに実体がmain.cssというズレが起こりがちです。
• nuxt.configを変更したあとに開発サーバーを再起動したか。設定ファイルの変更は再起動しないと反映されないことがあります。

同じNuxtの実務まわりでは、Nuxt.jsで日付をフォーマットする方法やNuxt.jsでuuid(v4)を使う方法も、プロジェクト共通の設定として一度決めておくと後が楽になります。