Интеграция с Astro

Интеграция UnoCSS для Astro: @unocss/astro. Посмотрите пример.

Установка

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

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

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

Создайте файл uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...параметры UnoCSS
})

Сброс стилей

По умолчанию сброс стилей браузера не будет внедрен. Чтобы включить его, установите пакет @unocss/reset:

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:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // или путь к файлу сброса
    }),
  ],
})

Использование без пресетов

Этот плагин не поставляется с какими-либо пресетами по умолчанию.

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

bun

bun add -D @unocss/astro

import UnoCSS from '@unocss/astro'

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

Для получения дополнительной информации обратитесь к плагину Vite.

INFO

Если вы создаете мета-фреймворк поверх UnoCSS, см. этот файл в качестве примера, как привязать пресеты по умолчанию.

Примечания

Компоненты client:only должны быть размещены в папке components или добавлены в конфигурацию content UnoCSS, чтобы быть обработанными.