Configuring UnoCSS

설정

설정이 UnoCSS를 강력하게 만듭니다.

• Rules - 원자 CSS 유틸리티 정의
• Shortcuts - 여러 규칙을 하나의 단축형으로 결합
• Theme - 테마 변수 정의
• Variants - 규칙에 사용자 정의 컨벤션 적용
• Extractors - 유틸리티 사용이 추출되는 위치와 방법 정의
• Preflights - 전역 원시 CSS 정의
• Layers - 각 유틸리티 레이어의 순서 정의
• Presets - 일반적인 사용 사례를 위한 사전 정의된 설정
• Transformers - 컨벤션을 지원하기 위한 사용자 소스 코드 변환기
• Autocomplete - 사용자 정의 자동완성 제안 정의

옵션

rules

• 타입: Rule<Theme>[]

CSS 유틸리티를 생성하는 규칙. 나중에 오는 항목이 더 높은 우선순위를 가집니다.

shortcuts

• 타입: UserShortcuts<Theme>

Windi CSS의 단축키와 유사하게, 기존 유틸리티를 결합하여 새로운 유틸리티를 만들 수 있습니다. 나중에 오는 항목이 더 높은 우선순위를 가집니다.

theme

• 타입: Theme

규칙 간 공유 설정을 위한 테마 객체.

extendTheme

• 타입: Arrayable<ThemeExtender<Theme>> 사용자 정의 함수는 테마 객체를 변경합니다.

원본을 완전히 대체하는 새로운 테마 객체를 반환하는 것도 가능합니다.

variants

• 타입: Variant<Theme>[]

선택자를 전처리하는 variant로, CSS 객체를 다시 작성할 수 있는 기능을 가집니다.

extractors

• 타입: Extractor[]

소스 파일을 처리하고 가능한 클래스/선택자를 출력하는 추출기. 언어 인식이 가능합니다.

preflights

• 타입: Preflight<Theme>[]

원시 CSS 주입.

layers

• 타입: Record<string, number>

레이어 순서. 기본값은 0입니다.

outputToCssLayers

• 타입: boolean | UseCssLayersOptions
• 기본값: false

레이어를 CSS Cascade Layers로 출력합니다.

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>

들어오는 유틸리티를 전처리하고, 제외하려면 falsy 값을 반환합니다.

postprocess

• 타입: Arrayable<Postprocessor>

생성된 유틸리티 객체를 후처리합니다.

separators

• 타입: Arrayable<string>
• 기본값: [':', '-']

Variant 구분자.

extractorDefault

• 타입: Extractor | null | false
• 기본값: import('@unocss/core').defaultExtractor

항상 적용되는 기본 추출기. 기본적으로 소스 코드를 공백과 따옴표로 분할합니다.

preset 또는 사용자 설정으로 대체될 수 있으며, 하나의 기본 추출기만 존재할 수 있고, 나중에 오는 것이 이전 것을 덮어씁니다.

기본 추출기를 비활성화하려면 null 또는 false를 전달하세요.

autocomplete

자동완성을 위한 추가 옵션.

templates

• 타입: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

자동완성 제안을 제공하는 사용자 정의 함수/템플릿.

extractors

• 타입: Arrayable<AutoCompleteExtractor>

가능한 클래스를 선택하고 클래스 이름 스타일 제안을 올바른 형식으로 변환하는 사용자 정의 추출기.

shorthands

• 타입: Record<string, string | string[]>

자동완성 제안을 제공하는 사용자 정의 단축키. 값이 배열인 경우 |로 결합되고 ()로 감싸집니다.

content

유틸리티 사용으로 추출될 소스에 대한 옵션.

지원되는 소스:

• filesystem - 파일 시스템에서 추출
• inline - 일반 인라인 텍스트에서 추출
• 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

해결된 설정을 수정하는 훅.

먼저 preset이 실행되고 그 다음 사용자 설정이 실행됩니다.

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

매칭된 선택자가 blocklist에 있을 때 경고 발생.