【Nuxt】Nuxtで全ページ共通のCSSを読み込む方法

Last updated at 2026-06-12Posted at 2026-06-12

Nuxt では、全ページ共通で読み込みたい CSS を nuxt.config.ts の css に指定できます。

例えば、以下のように設定します。

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css'
  ]
})

ディレクトリ構成は以下のようになります。

assets/
  css/
    main.css

main.css には、アプリ全体で使いたいスタイルを定義します。

/* assets/css/main.css */
body {
  margin: 0;
  font-family: sans-serif;
}

.meo-btn {
  border-radius: 999px;
}

コンポーネント内の <style scoped> はそのコンポーネント限定、nuxt.config.ts の css はアプリ全体に効く、という使い分けです。

このコンポーネントだけに効かせたいなら今の <style scoped> のままでOKです。複数コンポーネントやページで共通化したい共通ボタン・共通コンテナ・色・余白などはassets/css/main.css に逃がすのがNuxtっぽいです。