Nuxt で Master CSS を設定する

Master CSS の Nuxt モジュールをインストールし、Nuxt の css オプションで CSS エントリーを読み込みます。モジュールは Nuxt の HTML レンダリングモードを変えずに、CSS の配信を処理します。

#インストール

1. #Master CSS を追加する

   既存の Nuxt プロジェクトのルートでインストーラーを実行します。既定の静的モードは、完全なクラス文字列を走査して通常の CSS を出力します。

   npm create @master/css@2.0.0 -- --framework nuxt --yes

2. #プロジェクトのスタイルシートを読み込む

   モジュールの登録を保持し、インストーラーが作成した CSS エントリーを明示的に読み込んでください。~~/ はプロジェクトのルートを指します。アプリのディレクトリーが app/ の Nuxt プロジェクトでも同じです。

   nuxt.config.ts

   export default defineNuxtConfig({  modules: [['@master/css-nuxt', { mode: 'static' }]],  css: ['~~/assets/css/master.css']})

   assets/css/master.css

   @import '@master/css';

3. #Master CSS を使い始める

   開発サーバーを起動し、最初のコンポーネントにスタイルを付けます。以下の例では Nuxt 4 の app/ ディレクトリーを使います。

app/app.vue

<template>  <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">    Hello World  </p></template>

ニュートラルなサーフェス、細い枠線、小さな角丸、各辺に 1rem の内側余白を持つ例です。

#設定を確認する

開発サーバーの実行中に app/app.vue の p-md を p-lg に変えます。パディングが 1rem から 1.5rem に増えるはずです。元に戻してから、アプリをビルドして配信します。Nuxt の既定の Node サーバープリセットでは、次を実行します：

npm run buildnode .output/server/index.mjs

別の Nitro デプロイプリセットでは、その配信手順に従ってください。Nuxt の SSR が有効な場合、JavaScript を無効にして再読み込みしても、段落のパディング、角丸、浮き上がった面が保たれるはずです。静的とは CSS の生成方法を指し、クライアント専用の Nuxt ページをサーバーレンダリングに変えるものではありません。

スタイルが適用されない場合は、まず css オプションでルートのスタイルシートが読み込まれるか、次にモジュールが一度だけ登録されているか確認します。読み込まれた CSS 内で .p-md を探してください。ビルドの成功だけでは、エントリーがページまで届いたとは確認できません。

#別のレンダリングモードを選ぶ

既定は静的モードです。インストーラーのオプションがモジュールの mode を設定します。モードを変えても CSS エントリーを保持してください：

npm create @master/css@2.0.0 -- --framework nuxt --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')

npm create @master/css@2.0.0 -- --framework nuxt --mode progressive --yes