Astro 統合

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

インストール

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -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 options
})

スタイルリセット

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

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -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 // or a path to the reset file
    }),
  ],
})

プリセットなしでの使用

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

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

astro.config.mjs

import UnoCSS from '@unocss/astro'

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

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

情報

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

注記

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