ملف التكوين

نوصي بشدة باستخدام ملف uno.config.ts مخصص لتكوين UnoCSS الخاص بك، من أجل الحصول على أفضل تجربة مع IDEs والتكاملات الأخرى.

يبدو ملف التكوين الكامل الميزات مثل هذا:

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(),
  ],
})

مقارنة بالتكوين المضمن داخل vite.config.ts أو تكوينات الأدوات الأخرى، سيعمل ملف التكوين المخصص بشكل أفضل مع IDEs والتكاملات، مع أدوات أخرى مثل مكون ESLint الإضافي، بالإضافة إلى جعل HMR يعمل بشكل أفضل.

افتراضياً، سيبحث UnoCSS تلقائياً عن uno.config.{js,ts,mjs,mts} أو unocss.config.{js,ts,mjs,mts} في الدليل الجذري لمشروعك. يمكنك أيضاً تحديد ملف التكوين يدوياً، على سبيل المثال في Vite:

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

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

للحصول على القائمة الكاملة لخيارات التكوين المدعومة، يرجى الرجوع إلى مرجع التكوينات.