UnoCSSAstro 继承
UnoCSS 在 Astro 中的集成：@unocss/astro。查看示例。
安装
bash
pnpm add -D unocsspnpm add -D unocssbash
yarn add -D unocssyarn add -D unocssbash
npm install -D unocssnpm install -D unocssts
// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [UnoCSS()]
})// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [UnoCSS()]
})创建一个 uno.config.ts 文件：
ts
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS 选项
})// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS 选项
})样式重置
默认情况下，浏览器样式重置 不会被注入。要启用它，请安装 @unocss/reset 包：
bash
pnpm add -D @unocss/resetpnpm add -D @unocss/resetbash
yarn add -D @unocss/resetyarn add -D @unocss/resetbash
npm install -D @unocss/resetnpm install -D @unocss/reset并更新您的 astro.config.ts：
ts
// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [
UnoCSS({
injectReset: true // 或者重置文件的路径
})
]
})// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'
export default defineConfig({
integrations: [
UnoCSS({
injectReset: true // 或者重置文件的路径
})
]
})不使用预设
此插件不带任何默认预设。
bash
pnpm add -D @unocss/astropnpm add -D @unocss/astrobash
yarn add -D @unocss/astroyarn add -D @unocss/astrobash
npm install -D @unocss/astronpm install -D @unocss/astrots
// astro.config.mjs
import UnoCSS from '@unocss/astro'
export default {
integrations: [UnoCSS()]
}// astro.config.mjs
import UnoCSS from '@unocss/astro'
export default {
integrations: [UnoCSS()]
}更多详情，请参考 Vite 插件。
INFO
如果你正在构建一个基于 UnoCSS 的元框架，请参考这个文件中的示例，了解如何绑定默认预设。
注意事项
client:only 组件必须放置在 components 文件夹中，或者添加到 UnoCSS 的 extraContent 配置中，以便进行处理。