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

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

Установка

pnpm

pnpm add -D unocss @unocss/astro

yarn

yarn add -D unocss @unocss/astro

npm

npm install -D unocss @unocss/astro

bun

bun add -D unocss @unocss/astro

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:

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 // или путь к файлу сброса
    }),
  ],
})

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

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

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.

ИНФОРМАЦИЯ

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

Примечания

Для обработки компонентов с директивой client:only их необходимо разместить в папке components или добавить в конфигурацию content UnoCSS.