UnoCSS 中文网

主题

Astro 整合 ​

🌐 Astro Integration

用于 Astro 的 UnoCSS 集成：@unocss/astro。查看示例。

🌐 The UnoCSS integration for Astro: @unocss/astro. Check the example.

安装 ​

🌐 Installation

bash
pnpm add -D unocss @unocss/astro
bash
yarn add -D unocss @unocss/astro
bash
npm install -D unocss @unocss/astro
bash
bun add -D unocss @unocss/astro
astro.config.ts
ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

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

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

🌐 Create a uno.config.ts file:

uno.config.ts
ts
import { defineConfig } from 'unocss'

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

样式重置 ​

🌐 Style Reset

默认情况下，不会注入 浏览器样式重置。要启用它，请安装 @unocss/reset 包：

🌐 By default, browser style reset will not be injected. To enable it, install the @unocss/reset package:

bash
pnpm add -D @unocss/reset
bash
yarn add -D @unocss/reset
bash
npm install -D @unocss/reset
bash
bun add -D @unocss/reset

并更新你的 astro.config.ts：

🌐 And update your astro.config.ts:

astro.config.ts
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.

bash
pnpm add -D @unocss/astro
bash
yarn add -D @unocss/astro
bash
npm install -D @unocss/astro
bash
bun add -D @unocss/astro
astro.config.mjs
ts
import UnoCSS from '@unocss/astro'

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

欲了解更多详情，请参考 Vite 插件。

🌐 For more details, please refer to the Vite plugin.

INFO

如果你正在基于 UnoCSS 构建一个元框架，请参阅 这个文件 了解如何绑定默认预设的示例。

注意 ​

🌐 Notes

client:only 组件必须放置在 components 文件夹中，或添加到 UnoCSS 的 content 配置中才能被处理。