在 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.tsUnoCSS 内添加:

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

参考