---
url: https://unocss.zhcndoc.com/integrations/astro.md
description: UnoCSS 在 Astro 中的集成（@unocss/astro）。
---

# Astro 集成

UnoCSS 在 [Astro](https://astro.build/) 中的集成：`@unocss/astro`。查看 [示例](https://github.com/unocss/unocss/tree/main/examples/astro)。

## 安装

::: code-group

```bash [pnpm]
pnpm add -D unocss @unocss/astro
```

```bash [yarn]
yarn add -D unocss @unocss/astro
```

```bash [npm]
npm install -D unocss @unocss/astro
```

```bash [bun]
bun add -D unocss @unocss/astro
```

:::

```ts [astro.config.ts]
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

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

创建一个 `uno.config.ts` 文件：

```ts [uno.config.ts]
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS 选项
})
```

### 样式重置

默认情况下，[浏览器样式重置](/guide/style-reset) 不会被注入。要启用它，请安装 `@unocss/reset` 包：

::: code-group

```bash [pnpm]
pnpm add -D @unocss/reset
```

```bash [yarn]
yarn add -D @unocss/reset
```

```bash [npm]
npm install -D @unocss/reset
```

```bash [bun]
bun add -D @unocss/reset
```

:::

并更新您的 `astro.config.ts`：

```ts [astro.config.ts]
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // 或重置文件的路径
    }),
  ],
})
```

### 无预设的使用

该插件不带任何默认的预设。

::: code-group

```bash [pnpm]
pnpm add -D @unocss/astro
```

```bash [yarn]
yarn add -D @unocss/astro
```

```bash [npm]
npm install -D @unocss/astro
```

```bash [bun]
bun add -D @unocss/astro
```

:::

```ts [astro.config.mjs]
import UnoCSS from '@unocss/astro'

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

有关更多详细信息，请参阅 [Vite 插件](/integrations/vite)。

::: info
如果您正在 UnoCSS 上构建一个元框架，请查看 [这个文件](https://github.com/unocss/unocss/blob/main/packages-presets/unocss/src/astro.ts) 以获取如何绑定默认预设的示例。
:::

## 注意事项

[`client:only`](https://docs.astro.build/en/reference/directives-reference/#clientonly) 组件必须放在 [`components`](https://docs.astro.build/en/core-concepts/project-structure/#srccomponents) 文件夹中或添加到 UnoCSS 的 `content` 配置中，以便进行处理。