UnoCSS

配置参数

options object

Configurations for UnoCSS.

See https://unocss.dev/guide/config-file

Default:

"\npresets: [presetUno()]\n"

cssFile boolean string

Set the css filename for all generated styles, Set to false to insert a style tag per page.

Default:

"unocss.css"

placeholder string

A placeholder to replace with the generated CSS. Only used when cssFile is set.

transformers object[]

Process CSS files using UnoCSS transformers.

Default:

"["

reset boolean tailwind tailwind-compat eric-meyer

Supported CSS reset options.

See https://github.com/unocss/unocss/tree/main/packages/reset

Default:

false

描述

此插件允许使用 UnoCSS 实用至上 (utility-first) 的 CSS 框架，它兼容 Tailwind 和 Windi CSS。

它会分析页面的 HTML 代码，搜索 UnoCSS 类并生成所需的 CSS 代码。它还会处理 .css 文件以应用指令转换器 和变体组转换器。

---
layout: layout.vto
---
<h1 class="bg-purple-500">Hello world</h1>
</style>

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

生成的 CSS 代码会输出到 unocss.css 文件中。你可以使用 cssFile 选项自定义文件名，或者设置为 false 以使用 <style> 元素将代码内联到 HTML 页面中。

安装

在你的 _config.ts 文件中导入此插件即可使用它：

import lume from "lume/mod.ts";
import unocss from "lume/plugins/unocss.ts";

const site = lume();

site.use(unocss(/* Options */));

export default site;

配置

此插件接受一个配置对象，其中包含以下可用选项：

options : UnoCSS 的配置对象，用于定义主题、快捷方式等。 更多信息请查看 UnoCSS 文档。

cssFile : 设置导出 CSS 代码的文件名，或设置为 false 以将 CSS 代码插入到每个页面的 <style> 标签中。

transformers : 一个包含所有要应用于 CSS 文件的转换器的数组。默认情况下加载 variantGroup 和 directives。 设置为空数组以禁用此功能。 更多信息请查看 UnoCSS 文档。

reset : 应用一个重置文件。 更多信息请查看 UnoCSS 文档。 默认情况下是禁用的。