Astro 集成

UnoCSS 为 Astro 提供的集成插件：@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 插件。

INFO

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