Cấu hình UnoCSS

Cấu hình

Cấu hình là những thứ làm cho UnoCSS mạnh mẽ.

• Quy tắc - Định nghĩa các tiện ích CSS nguyên tử
• Phím tắt - Kết hợp nhiều quy tắc thành một viết tắt duy nhất.
• Chủ đề - Định nghĩa các biến chủ đề.
• Biến thể - Áp dụng các quy ước tùy chỉnh cho các quy tắc.
• Trích xuất - Định nghĩa nơi và cách sử dụng các tiện ích được trích xuất.
• Preflights - Định nghĩa CSS thô toàn cục.
• Layers - Định nghĩa thứ tự của mỗi layer tiện ích.
• Presets - Cấu hình được xác định trước cho các trường hợp sử dụng phổ biến.
• Transformers - Bộ biến đổi mã cho mã nguồn người dùng để hỗ trợ các quy ước.
• Tự động hoàn thành - Định nghĩa các gợi ý tự động hoàn thành tùy chỉnh.

Tùy chọn

rules

• Kiểu: Rule<Theme>[]

Các quy tắc để tạo tiện ích CSS. Các mục sau có ưu tiên cao hơn.

shortcuts

• Kiểu: UserShortcuts<Theme>

Tương tự như phím tắt của Windi CSS, cho phép bạn tạo các tiện ích mới bằng cách kết hợp các tiện ích hiện có. Các mục sau có ưu tiên cao hơn.

theme

• Kiểu: Theme

Đối tượng chủ đề cho cấu hình chia sẻ giữa các quy tắc.

extendTheme

• Kiểu: Arrayable<ThemeExtender<Theme>> Các hàm tùy chỉnh thay đổi đối tượng chủ đề.

Nó cũng có thể trả về một đối tượng chủ đề mới để thay thế hoàn toàn đối tượng ban đầu.

variants

• Kiểu: Variant<Theme>[]

Các biến thể xử lý trước các bộ chọn, có khả năng viết lại đối tượng CSS.

extractors

• Kiểu: Extractor[]

Các extractor để xử lý tệp nguồn và xuất các lớp/bộ chọn có thể. Có thể nhận biết ngôn ngữ.

preflights

• Kiểu: Preflight<Theme>[]

Các tiêm CSS thô.

layers

• Kiểu: Record<string, number>

Thứ tự layer. Mặc định là 0.

outputToCssLayers

• Kiểu: boolean | UseCssLayersOptions
• Mặc định: false

Xuất các layer thành CSS Cascade Layers.

cssLayerName

• Kiểu: (internalLayer: string) => string | undefined | null

Chỉ định tên của CSS layer mà layer nội bộ nên được xuất vào (có thể là một layer con, ví dụ: "mylayer.mysublayer").

Nếu trả về undefined, tên layer nội bộ sẽ được sử dụng làm tên CSS layer. Nếu trả về null, layer nội bộ sẽ không được xuất thành một CSS layer.

sortLayers

• Kiểu: (layers: string[]) => string[]

Hàm tùy chỉnh để sắp xếp các layer.

presets

• Kiểu: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

Cấu hình được xác định trước cho các trường hợp sử dụng phổ biến.

transformers

• Kiểu: SourceCodeTransformer[]

Các bộ biến đổi tùy chỉnh cho mã nguồn.

blocklist

• Kiểu: BlocklistRule[]

Các quy tắc để loại trừ các bộ chọn cho hệ thống thiết kế của bạn (để thu hẹp các khả năng). Kết hợp với các tùy chọn warnExcluded cũng có thể giúp bạn xác định các cách sử dụng sai.

safelist

• Kiểu: string[]

Các tiện ích luôn được bao gồm.

preprocess

• Kiểu: Arrayable<Preprocessor>

Xử lý trước các tiện ích đến, trả về giá trị falsy để loại trừ.

postprocess

• Kiểu: Arrayable<Postprocessor>

Xử lý sau đối tượng tiện ích được tạo.

separators

• Kiểu: Arrayable<string>
• Mặc định: [':', '-']

Dấu phân cách biến thể.

extractorDefault

• Kiểu: Extractor | null | false
• Mặc định: import('@unocss/core').defaultExtractor

Extractor mặc định luôn được áp dụng. Theo mặc định nó chia tách mã nguồn bằng khoảng trắng và dấu ngoặc kép.

Nó có thể được thay thế bởi preset hoặc cấu hình người dùng, chỉ có thể có một extractor mặc định, extractor sau sẽ ghi đè lên extractor trước đó.

Truyền null hoặc false để vô hiệu hóa extractor mặc định.

autocomplete

Các tùy chọn bổ sung cho tự động hoàn thành.

templates

• Kiểu: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Các hàm / mẫu tùy chỉnh để cung cấp các gợi ý tự động hoàn thành.

extractors

• Kiểu: Arrayable<AutoCompleteExtractor>

Các extractor tùy chỉnh để lấy các lớp có thể và chuyển đổi các gợi ý kiểu tên lớp thành định dạng chính xác.

shorthands

• Kiểu: Record<string, string | string[]>

Các viết tắt tùy chỉnh để cung cấp các gợi ý tự động hoàn thành. nếu giá trị là một mảng, nó sẽ được nối với | và được bao bọc trong ().

content

Các tùy chọn cho các nguồn sẽ được trích xuất như các cách sử dụng tiện ích.

Các nguồn được hỗ trợ:

• filesystem - trích xuất từ hệ thống tệp
• inline - trích xuất từ văn bản nội tuyến thuần
• pipeline - trích xuất từ pipeline biến đổi của các công cụ xây dựng, như Vite và Webpack

Cách sử dụng được trích xuất từ mỗi nguồn sẽ được hợp nhất lại.

filesystem

• Kiểu: string[]
• Mặc định: []

Các mẫu glob để trích xuất từ hệ thống tệp, ngoài các nguồn nội dung khác.

Ở chế độ phát triển, các tệp sẽ được theo dõi và kích hoạt HMR.

inline

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

Văn bản nội tuyến sẽ được trích xuất.

pipeline

Các bộ lọc để xác định xem có nên trích xuất một số module nhất định từ pipeline biến đổi của các công cụ xây dựng hay không.

Hiện tại chỉ hoạt động cho tích hợp Vite và Webpack.

Đặt false để vô hiệu hóa.

include

• Kiểu: FilterPattern
• Mặc định: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

Các mẫu lọc các tệp đang được trích xuất. Hỗ trợ biểu thức chính quy và các mẫu glob picomatch.

Theo mặc định, các tệp .ts và .js không được trích xuất.

exclude

• Kiểu: FilterPattern
• Mặc định: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

Các mẫu lọc các tệp không được trích xuất. Hỗ trợ biểu thức chính quy và các mẫu glob picomatch.

Theo mặc định, node_modules và dist cũng được trích xuất.

configResolved

• Kiểu: (config: ResolvedConfig) => void

Hook để sửa đổi cấu hình đã giải quyết.

Preset đầu tiên chạy trước và cấu hình người dùng.

configFile

• Kiểu: string | false

Tải từ các tệp cấu hình.

Đặt false để vô hiệu hóa.

configDeps

• Kiểu: string[]

Danh sách các tệp cũng sẽ kích hoạt tải lại cấu hình.

cli

Các tùy chọn CLI UnoCSS.

entry

• Kiểu: Arrayable<CliEntryItem>

Các điểm vào cli UnoCSS.

patterns

• Kiểu: string[]

Các mẫu glob để trích xuất từ hệ thống tệp.

outFile

• Kiểu: string

Đường dẫn tệp đầu ra.

shortcutsLayer

• Kiểu: string
• Mặc định: 'shortcuts'

Tên bố cục của phím tắt.

envMode

• Kiểu: 'dev' | 'build'
• Mặc định: 'build'

Chế độ môi trường.

details

• Kiểu: boolean

Hiển thị các chi tiết nội bộ cho việc gỡ lỗi / kiểm tra.

warn

• Kiểu: boolean
• Mặc định: true

Phát ra cảnh báo khi các bộ chọn khớp được trình bày trong blocklist.