在 Astro 中使用 UnoCSS

2024-04-02

安装

Terminal window
bun add -D unocss

在 astro.config.ts integrations 字段加上 UnoCSS：

import { defineConfig } from "astro/config";
import UnoCSS from "unocss/astro";


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

创建 uno.config.ts 文件：

import {
  defineConfig,
  presetIcons,
  presetUno,
  transformerDirectives,
} from "unocss";


export default defineConfig({
  shortcuts: [],
  transformers: [transformerDirectives()],
  presets: [
    presetUno(),
    presetIcons({
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
    }),
  ],
});

使用

样式重置

先安装 @unocss/reset 包：

Terminal window
bun add @unocss/reset

然后在 astro.config.ts 中 UnoCSS 内添加：

import { defineConfig } from "astro/config";
import UnoCSS from "unocss/astro";


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

其他

  • min-width: sm, md
  • max-width: lt-sm

参考

# Astro
# UnoCSS