配置 UnoCSS

配置

配置使UnoCSS功能强大。

• Rules - 定义原子 CSS 实用程序。
• Shortcuts - 将多个规则组合成一个简写。
• Theme - 定义主题变量。
• Variants - 对规则应用自定义约定。
• Extractors - 定义提取实用程序使用的位置和方式。
• Preflights - 定义全局原始 CSS。
• Layers - 定义每个实用程序层级的顺序。
• Presets - 预定义的配置，用于常见的用例。
• Transformers - 代码转换器，用于用户源代码以支持约定。
• Autocomplete - 定义自定义自动完成建议。

参数

规则

• Type: Rule<Theme>[]

规则用于生成原子 CSS 实用程序。后面的条目优先级更高。

图标

• Type: UserShortcuts<Theme>

与 Windi CSS 的快捷方式类似，允许您通过组合现有规则来创建新的实用程序。后面的条目优先级更高。

主题

• Type: Theme

主题对象，用于在规则之间共享配置。

扩展主题

• Type: Arrayable<ThemeExtender<Theme>> 自定义函数可以修改主题对象。

它也可以返回一个新的主题对象来完全替换原始对象。

变形

• Type: Variant<Theme>[]

变体用于预处理选择器，具有重写 CSS 对象的能力。

提取器

• Type: Extractor[]

提取器用于处理源文件并输出可能的类/选择器。可以是语言感知的。

preflights

• Type: Preflight<Theme>[]

原始 CSS 注入。

layers

• Type: Record<string, number>

层级顺序。默认值为 0。

sortLayers

• Type: (layers: string[]) => string[]

自定义函数用于排序层级。

presets

• Type: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

预定义的配置，用于常见的用例。

transformers

• Type: SourceCodeTransformer[]

自定义转换器，用于用户源代码以支持约定。

blocklist

• Type: BlocklistRule[]

规则用于排除您的设计系统的选择器（以缩小可能性）。结合 warnExcluded 选项也可以帮助您识别错误的用法。

safelist

• Type: string[]

始终包含的实用程序。

preprocess

• Type: Arrayable<Preprocessor>

预处理传入的实用程序，返回假值以排除。

postprocess

• Type: Arrayable<Postprocessor>

后处理生成的实用程序对象。

separators

• Type: Arrayable<string>
• Default: [':', '-']

变体分隔符。

extractorDefault

• Type: Extractor | null | false
• Default: import('@unocss/core').defaultExtractor

默认提取器，始终应用。默认情况下，它会按空格和引号拆分源代码。

它可能会被预设或用户配置替换，只能有一个默认提取器，后面的提取器会覆盖前面的提取器。

传递 null 或 false 来禁用默认提取器。

autocomplete

额外的自动完成选项。

templates

• Type: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

自定义函数 / 模板，用于提供自动完成建议。

extractors

• Type: Arrayable<AutoCompleteExtractor>

自定义提取器，用于从源代码中提取可能的类和转换类名样式建议为正确的格式。

shorthands

• Type: Record<string, string | string[]>

自定义快捷方式，用于提供自动完成建议。如果值是数组，它将与 | 连接并包装在 () 中。

content

选项，用于指定要从哪些源提取作为实用程序使用。

支持的源：

• filesystem - 从文件系统提取
• plain - 从纯内联文本提取
• pipeline - 从构建工具的转换管道提取，例如 Vite 和 Webpack

从每个源提取的用法将被合并在一起。

filesystem

• Type: string[]
• Default: []

Glob 模式，用于从文件系统提取，除了其他内容源。

在开发模式下，文件将被监视并触发 HMR。

inline

• Type: string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []

内联文本，用于提取。

pipeline

筛选器，用于确定是否从构建工具的转换管道中提取某些模块。

目前仅适用于 Vite 和 Webpack 集成。

设置为 false 以禁用。

include

• Type: FilterPattern
• Default: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

模式，用于过滤要提取的文件。支持正则表达式和 picomatch glob 模式。

默认情况下，.ts 和 .js 文件不会被提取。

exclude

• Type: FilterPattern
• Default: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

模式，用于过滤不被提取的文件。支持正则表达式和 picomatch glob 模式。

默认情况下，node_modules 和 dist 也会被提取。

configResolved

• Type: (config: ResolvedConfig) => void 用于修改已解析配置的钩子。

预设配置先运行，随后是用户配置。

configFile

• Type: string | false

Load from configs files.

Set false to disable.

configDeps

• Type: string[]

List of files that will also trigger config reloads.

cli

UnoCSS CLI options.

entry

• Type: Arrayable<CliEntryItem>

UnoCSS cli entry points.

patterns

• Type: string[]

Glob 模式，用于从文件系统提取。

outFile

• Type: string

输出文件路径。

shortcutsLayer

• Type: string
• Default: 'shortcuts'

快捷方式的布局名称。

envMode

• Type: 'dev' | 'build'
• Default: 'build'

环境模式。

details

• Type: boolean

暴露内部详细信息以进行调试 / 检查。

warn

• Type: boolean
• Default: true

当匹配的选择器在 blocklist 中时，发出警告。