UnoCSS 配置
配置
配置是使 UnoCSS 强大的要素。
- Rules - 定义原子 CSS 实用程序
- Shortcuts - 将多个规则组合成一个简写。
- Theme - 定义主题变量。
- Variants - 将自定义约定应用于规则。
- Extractors - 定义提取实用工具的位置和方式。
- Preflights - 定义全局原始 CSS。
- Layers - 定义每个实用工具层的顺序。
- Presets - 常见用例的预定义配置。
- Transformers - 代码转换器用于支持用户源代码以符合规范。
- Autocomplete - 定义个性化的自动完成建议。
选项
规则
- 类型:
Rule<Theme>[]
生成 CSS 实用工具的规则。后面的条目优先级更高。
快捷方式
- 类型:
UserShortcuts<Theme>
类似于 Windi CSS 的快捷方式，允许您通过组合现有实用工具来创建新的实用工具。后面的条目优先级更高。
主题
- 类型:
Theme
用于规则之间共享配置的主题对象。
扩展主题
- 类型:
Arrayable<ThemeExtender<Theme>>
自定义函数会改变主题对象。
也可以返回一个新的主题对象来完全替换原始对象。
变体
- 类型:
Variant<Theme>[]
预处理选择器的变体，具有重写 CSS 对象的能力。
提取器
- 类型:
Extractor[]
提取器用于处理源文件并输出可能的类/选择器。可以是语言感知的。
预检
- 类型:
Preflight<Theme>[]
原始 CSS 注入。
层
- 类型:
Record<string, number>
层次顺序。默认为 0。
输出到 CSS 层
- 类型:
boolean | UseCssLayersOptions - 默认值:
false
将层输出到 CSS 级联层。
CSS 层名称
- 类型:
(internalLayer: string) => string | undefined | null
指定内部层应该输出到的 CSS 层的名称（可以是子层，例如 "mylayer.mysublayer"）。
如果返回 undefined，则会将内部层名称用作 CSS 层名称。 如果返回 null，则内部层将不会输出到 CSS 层。
层排序
- 类型:
(layers: string[]) => string[]
自定义函数以对层进行排序。
预设
- 类型:
(PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]
常见用例的预定义配置。
转换器
- 类型:
SourceCodeTransformer[]
自定义源代码转换器。
阻止列表
- 类型:
BlocklistRule[]
排除设计系统中选择器的规则（以缩小可能性）。结合 warnExcluded 选项还可以帮助你识别错误的使用情况。
安全列表
- 类型:
string[]
始终包含的实用工具。
预处理
- 类型:
Arrayable<Preprocessor>
预处理传入的实用工具，返回假值以排除。
后处理
- 类型:
Arrayable<Postprocessor>
对生成的实用工具对象进行后处理。
分隔符
- 类型:
Arrayable<string> - 默认值:
[':', '-']
变体分隔符。
提取器默认值
- 类型:
Extractor | null | false - 默认值:
import('@unocss/core').defaultExtractor
始终应用的默认提取器。默认情况下，它通过空格和引号分割源代码。
它可能会被预设或用户配置替换，只能呈现一个默认提取器，后面的提取器将覆盖前面的提取器。
传递 null 或 false 来禁用默认提取器。
自动完成
自动完成的附加选项。
模板
- 类型:
Arrayable<AutoCompleteFunction | AutoCompleteTemplate>
自定义函数/模板，提供自动补全建议。
提取器
- 类型:
Arrayable<AutoCompleteExtractor>
自定义提取器用于捕获可能的类，并将类名样式建议转换为正确的格式。
快捷方式
- 类型:
Record<string, string | string[]>
自定义快捷方式以提供自动完成建议。如果值是一个数组，则将用 | 连接，并用 () 包裹。
内容
用于提取为实用工具用法的源代码的选项。
支持的源:
filesystem- 从文件系统提取plain- 从普通的内联文本提取pipeline- 从构建工具的转换流水线中提取，例如 Vite 和 Webpack
每个源提取的用法将被 合并 在一起。
文件系统
- 类型:
string[] - 默认值:
[]
除其他内容来源外，从文件系统中提取的 glob 模式。
在开发模式下，文件将被监视并触发热模块替换（HMR）。
内联
- 类型:
string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []
要提取的内联文本。
流水线
用于确定是否从构建工具的转换流水线中提取某些模块的过滤器。
目前仅适用于 Vite 和 Webpack 集成。
使用 false 设置为禁用。
包含
- 类型:
FilterPattern - 默认值:
[/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]
筛选要提取的文件的模式。支持正则表达式和 picomatch 理模式。
默认情况下，.ts 和 .js 文件不会被提取。
排除
- 类型:
FilterPattern - 默认值:
[/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]
筛选不被提取的文件的模式。支持正则表达式和 picomatch 理模式。
默认情况下，也会提取 node_modules 和 dist。
解析配置
- 类型:
(config: ResolvedConfig) => void
使用钩子来修改解析的配置。
首先运行第一个预设，然后是用户配置。
配置文件
- 类型:
string | false
从配置文件中加载。
使用 false 设置为禁用。
依赖配置
- 类型:
string[]
会触发配置重新加载的文件列表。
命令行
UnoCSS 命令行选项。
入口
- 类型:
Arrayable<CliEntryItem>
UnoCSS 命令行入口点。
模式
- 类型:
string[]
从文件系统中提取的通配符模式。
输出文件
- 类型:
string
输出文件路径。
快捷方式层
- 类型:
string - 默认值:
'shortcuts'
快捷键的布局名称。
环境模式
- 类型:
'dev' | 'build' - 默认值:
'build'
环境模式。
细节
- 类型:
boolean
暴露内部细节以进行调试/检查。
警告
- 类型:
boolean - 默认值:
true
当匹配的选择器出现在块列表中时发出警告。