Astro 整合

¥Astro Integration

Astro 的 UnoCSS 集成：@unocss/astro。检查 example。

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

安装

¥Installation

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 文件：

¥Create a uno.config.ts file:

uno.config.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:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

并更新你的 astro.config.ts：

¥And update your astro.config.ts:

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

astro.config.mjs

import UnoCSS from '@unocss/astro'

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

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

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

信息

如果你正在 UnoCSS 之上构建元框架，请参阅 这个文件 以获取有关如何绑定默认预设的示例。

¥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 文件夹中或添加到 UnoCSS 的 content 配置中才能进行处理。

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