Integracja Astro

Integracja UnoCSS dla Astro: @unocss/astro. Zobacz przykład.

Instalacja

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(),
  ],
})

Utwórz plik uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...Opcje UnoCSS
})

Reset stylów

Domyślnie reset stylów przeglądarki nie zostanie wstrzyknięty. Aby go włączyć, zainstaluj pakiet @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

I zaktualizuj swój 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
    }),
  ],
})

Usage without presets

This plugin does not come with any default presets.

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(),
  ],
}

For more details, please refer to the Vite plugin.

INFO

If you are building a meta framework on top of UnoCSS, see this file for an example on how to bind the default presets.

Notes

client:only components must be placed in components folder or added to UnoCSS's content config in order to be processed.