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 options
})

样式重置

默认情况下，浏览器样式重置 不会被注入。要启用它，请安装 @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 // or a path to the reset file
    }),
  ],
})

无预设的使用

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

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

信息

如果你正在 UnoCSS 之上构建一个元框架，请查看 此文件，了解如何绑定默认预设的示例。

说明

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