在 Astro 中使用 UnoCSS

 

2024-04-02

安装

Terminal window
1
bun add -D unocss

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

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


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

创建 uno.config.ts 文件：

1
import {
2
  defineConfig,
3
  presetIcons,
4
  presetUno,
5
  transformerDirectives,
6
} from "unocss";
7


8
export default defineConfig({
9
  shortcuts: [],
10
  transformers: [transformerDirectives()],
11
  presets: [
12
    presetUno(),
13
    presetIcons({
14
      extraProperties: {
15
        display: "inline-block",
16
        "vertical-align": "middle",
17
      },
18
    }),
19
  ],
20
});

使用

样式重置

先安装 @unocss/reset 包：

Terminal window
1
bun add @unocss/reset

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

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


4
export default defineConfig({
5
  integrations: [
6
    UnoCSS({
7
      injectReset: true,
8
    }),
9
  ],
10
});

其他

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

参考

# Astro
# UnoCSS