配置 UnoCSS
配置
配置是使 UnoCSS 强大的关键。
- 规则 - 定义原子 CSS 实用程序
- 快捷方式 - 将多个规则合并到一个简写中。
- 主题 - 定义主题变量。
- 变体 - 对规则应用自定义约定。
- 提取器 - 定义在何处以及如何提取实用程序的使用。
- 预设 - 定义全局原始 CSS。
- 层级 - 定义每个实用程序层级的顺序。
- 预设 - 预定义的常见用例配置。
- 转换器 - 代码转换器用于用户源代码以支持约定。
- 自动完成 - 定义自定义自动完成建议。
选项
rules
- 类型:
Rule<Theme>[]
用于生成 CSS 实用程序的规则。后面的条目优先级更高。
shortcuts
- 类型:
UserShortcuts<Theme>
类似于 Windi CSS 的快捷方式，允许您通过组合现有实用程序来创建新的实用程序。后面的条目优先级更高。
theme
- 类型:
Theme
用于规则之间共享配置的主题对象。
extendTheme
- 类型:
Arrayable<ThemeExtender<Theme>>自定义函数修改主题对象。
也可以返回一个新的主题对象来完全替换原始主题对象。
variants
- 类型:
Variant<Theme>[]
预处理选择器的变体，能够重写 CSS 对象。
extractors
- 类型:
Extractor[]
提取器用于处理源文件并输出可能的类/选择器。可以是语言感知的。
preflights
- 类型:
Preflight<Theme>[]
原始 CSS 注入。
layers
- 类型:
Record<string, number>
层级顺序。默认值为 0。
outputToCssLayers
- 类型:
boolean | UseCssLayersOptions - 默认:
false
将层级输出到 CSS 级联层。
cssLayerName
- 类型:
(internalLayer: string) => string | undefined | null
指定内部层级应输出到的 CSS 层级的名称（可以是子层级，例如“mylayer.mysublayer”）。
如果返回 undefined，则内部层级名称将用作 CSS 层级名称。如果返回 null，则内部层级将不会输出到 CSS 层级。
sortLayers
- 类型:
(layers: string[]) => string[]
用于排序层级的自定义函数。
presets
- 类型:
(PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]
预定义的常见用例配置。
transformers
- 类型:
SourceCodeTransformer[]
对源代码的自定义转换器。
blocklist
- 类型:
BlocklistRule[]
用于排除设计系统选择器的规则（以缩小可能性）。结合 warnExcluded 选项还可以帮助您识别错误的使用。
safelist
- 类型:
string[]
始终包含的实用程序。
preprocess
- 类型:
Arrayable<Preprocessor>
预处理传入的实用程序，返回假值以排除。
postprocess
- 类型:
Arrayable<Postprocessor>
对生成的 utils 对象进行后处理。
separators
- 类型:
Arrayable<string> - 默认:
[':', '-']
变体分隔符。
extractorDefault
- 类型:
Extractor | null | false - 默认:
import('@unocss/core').defaultExtractor
始终应用的默认提取器。默认情况下，它会按空格和引号拆分源代码。
它可能被预设或用户配置替换，只能存在一个默认提取器，后面的提取器将覆盖前面的提取器。
传递 null 或 false 以禁用默认提取器。
autocomplete
自动完成的额外选项。
templates
- 类型:
Arrayable<AutoCompleteFunction | AutoCompleteTemplate>
自定义函数/模板以提供自动完成建议。
extractors
- 类型:
Arrayable<AutoCompleteExtractor>
自定义提取器以获取可能的类并将类名样式建议转换为正确的格式。
shorthands
- 类型:
Record<string, string | string[]>
用于提供自动完成建议的自定义简写。如果值是一个数组，它将使用 | 连接并用 () 括起来。
content
用于作为实用程序使用提取的源的选项。
支持的来源
filesystem- 从文件系统提取plain- 从纯文本内联提取pipeline- 从构建工具的转换管道中提取，例如 Vite 和 Webpack
从每个来源提取的使用将合并在一起。
filesystem
- 类型:
string[] - 默认:
[]
用于从文件系统提取的 glob 模式，除了其他内容来源之外。
在开发模式下，文件将被监视并触发 HMR。
inline
- 类型:
string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []
要提取的内联文本。
pipeline
用于确定是否从构建工具的转换管道中提取特定模块的过滤器。
目前仅适用于 Vite 和 Webpack 集成。
设置为 false 以禁用。
include
- 类型:
FilterPattern - 默认:
[/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]
用于过滤正在提取的文件的模式。支持正则表达式和 picomatch glob 模式。
默认情况下，.ts 和 .js 文件不会被提取。
exclude
- 类型:
FilterPattern - 默认:
[/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]
用于过滤不会被提取的文件的模式。支持正则表达式和 picomatch glob 模式。
默认情况下，node_modules 和 dist 也将被提取。
configResolved
- 类型:
(config: ResolvedConfig) => void
用于修改已解析配置的钩子。
首先运行预设，然后运行用户配置。
configFile
- 类型:
string | false
从配置文件加载。
设置为 false 以禁用。
configDeps
- 类型:
string[]
也将触发配置重新加载的文件列表。
cli
UnoCSS CLI 选项。
entry
- 类型:
Arrayable<CliEntryItem>
UnoCSS cli 入口点。
patterns
- 类型:
string[]
用于从文件系统提取的 glob 模式。
outFile
- 类型:
string
输出文件路径。
shortcutsLayer
- 类型:
string - 默认:
'shortcuts'
快捷方式的布局名称。
envMode
- 类型:
'dev' | 'build' - 默认:
'build'
环境模式。
details
- 类型:
boolean
公开内部详细信息以进行调试/检查。
warn
- 类型:
boolean - 默认值：
true
当匹配的选择器出现在黑名单中时，发出警告。