Astro Integration

UnoCSS-integration för Astro: @unocss/astro. Kolla exemplet.

Installation

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

Skapa en uno.config.ts-fil:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS-alternativ
})

Stil-återställning

Som standard kommer webbläsarens stil-återställning inte att injiceras. För att aktivera det, installera @unocss/reset-paketet:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

Och uppdatera din astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // eller en sökväg till återställningsfilen
    }),
  ],
})

Användning utan presets

Denna plugin kommer inte med några standardpresets.

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

För mer information, se Vite-plugin.

INFO

Om du bygger ett meta-ramverk ovanpå UnoCSS, se denna fil för ett exempel på hur man binder standardpresets.

Anteckningar

client:only komponenter måste placeras i components mappen eller läggas till i UnoCSS:s content-konfiguration för att bearbetas.