Astro 整合

適用於 Astro 的 UnoCSS 整合套件：@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 設定中才能被處理。