UnoCSS 中文网

Appearance

Astro 集成 ​

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

安装 ​

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

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

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

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

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

样式重置 ​

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

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

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

不使用预设的用法 ​

此插件不附带任何默认预设。

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 插件。

信息

如果您正在 UnoCSS 之上构建元框架，请参考 此文件 以获取如何绑定默认预设的示例。

注意事项 ​

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