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 選項
})

樣式重置

默認情況下，瀏覽器樣式重置不會被注入。要啟用它，請安裝 @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 // 或重置文件的路徑
    }),
  ],
})

不帶預設

此插件沒有任何默認預設。

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 配置中，以便被處理。