Tệp cấu hình

Chúng tôi rất khuyên bạn nên sử dụng một tệp uno.config.ts riêng biệt để cấu hình UnoCSS của mình, để có được trải nghiệm tốt nhất với các IDE và các tích hợp khác.

Một tệp cấu hình đầy đủ tính năng trông như thế này:

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

So với cấu hình nội tuyến bên trong vite.config.ts hoặc các cấu hình công cụ khác, tệp cấu hình riêng biệt sẽ hoạt động tốt hơn với các IDE và các tích hợp, với các công cụ khác như plugin ESLint, ngoài ra còn làm cho HMR hoạt động tốt hơn.

Theo mặc định, UnoCSS sẽ tự động tìm kiếm uno.config.{js,ts,mjs,mts} hoặc unocss.config.{js,ts,mjs,mts} trong thư mục gốc của dự án của bạn. Bạn cũng có thể chỉ định tệp cấu hình theo cách thủ công, ví dụ trong Vite:

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      configFile: '../my-uno.config.ts',
    }),
  ],
})

Để biết danh sách đầy đủ các tùy chọn cấu hình được hỗ trợ, vui lòng tham khảo Tham khảo Cấu hình.

Tệp cấu hình ​

Tệp cấu hình