UnoCSS Astro 統合

Astro 用の UnoCSS 統合 (@unocss/astro)。

Astro 統合

Astro 用の UnoCSS 統合: @unocss/astro。例を確認してください。

インストール

::: code-group

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

:::

astro.config.ts

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS(),
  ],
})

uno.config.ts ファイルを作成します:

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS オプション
})

スタイルリセット

デフォルトでは、ブラウザスタイルリセットは注入されません。有効にするには、@unocss/reset パッケージをインストールします:

::: code-group

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

:::

そして、astro.config.ts を更新します:

astro.config.ts

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // またはリセットファイルへのパス
    }),
  ],
})

プリセットなしでの使用

このプラグインにはデフォルトのプリセットは含まれていません。

::: code-group

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

bun

bun add -D @unocss/astro

:::

astro.config.mjs

import UnoCSS from '@unocss/astro'

export default {
  integrations: [
    UnoCSS(),
  ],
}

詳細については、Vite プラグインを参照してください。

::: info UnoCSS 上にメタフレームワークを構築している場合は、デフォルトのプリセットをバインドする方法の例としてこのファイルを参照してください。 :::

注意事項

client:only コンポーネントは、components フォルダに配置するか、UnoCSS の content 設定に追加して処理される必要があります。

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
#