Vite Plugin

Vite eklentisi unocss paketiyle birlikte gelir.

Installation

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Eklentiyi yükleyin:

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

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

Bir uno.config.ts dosyası oluşturun:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS seçenekleri
})

Ana girişinize virtual:uno.css ekleyin:

import 'virtual:uno.css'

Modes

Vite eklentisi, farklı davranışları etkinleştiren bir dizi modla birlikte gelir.

global (varsayılan)

Bu eklentinin varsayılan modudur: bu modda giriş noktanıza uno.css içe aktarımını eklemeniz gerekir.

Bu mod, build ve HMR desteğiyle dev için bir dizi Vite eklentisi etkinleştirir.

Oluşturulan css, index.html'e enjekte edilen global bir stil sayfası olacaktır.

vue-scoped

Bu mod, oluşturulan CSS'yi izolasyon için Vue SFC'lerin <style scoped> bölümüne enjekte edecektir.

svelte-scoped

svelte-scoped modu kendi paketine taşındı, bkz. @unocss/svelte-scoped/vite.

shadow-dom

Web Components Shadow DOM kullandığından, global bir stil sayfasından içeriği doğrudan stillendirmenin bir yolu yoktur (CSS custom properties kullanmadığınız sürece, bunlar Shadow DOM'a nüfuz eder), oluşturulan CSS'i eklenti tarafından her web bileşeni stil CSS bloğuna @unocss-placeholder sihirli yer tutucu ekleyerek Shadow DOM stiline satır içi olarak eklemeniz gerekir. Web Bileşenlerinizi Vue SFC'lerinde tanımlıyorsanız ve UnoCSS ile birlikte özel stiller tanımlamak istiyorsanız, IDE'nizde sözdizimi hatalarından kaçınmak için yer tutucuyu bir CSS yorumuna sarabilirsiniz.

per-module (deneysel)

Bu mod, her modül için bir CSS sayfası oluşturacaktır, kapsamlı olabilir.

dist-chunk (deneysel)

Bu mod, derleme sırasında her kod parçası için bir CSS sayfası oluşturacaktır, MPA için harikadır.

Edit classes in DevTools

"Talep üzerine" sınırlaması nedeniyle, DevTools henüz kaynak kodunuzda kullanmadıklarınızı bilmez. Bu nedenle, sınıfları doğrudan DevTools'ta değiştirerek işlerin nasıl çalıştığını denemek istiyorsanız, ana girişinize aşağıdaki satırları eklemeniz yeterlidir.

import 'uno.css'
import 'virtual:unocss-devtools'

WARNING

Lütfen dikkatli kullanın, perde arkasında sınıf değişikliklerini algılamak için MutationObserver kullanıyoruz. Bu, yalnızca manuel değişikliklerinizi değil, aynı zamanda komut dosyalarınız tarafından yapılan değişiklikleri de algılayacağı ve stil sayfasına dahil edeceği anlamına gelir. Bu, komut dosyası etiketlerinde bazı mantığa dayalı dinamik sınıflar eklediğinizde geliştirme ve üretim derlemesi arasında bazı uyumsuzluklara neden olabilir. Dinamik parçalarınızı safelist'e eklemenizi veya mümkünse üretim derlemeniz için UI regresyon testleri kurmanızı öneririz.

Frameworks

Bazı UI/Uygulama çerçevelerinin çalışması için düzeltilmesi gereken bazı uyarıları vardır, aşağıdaki çerçevelerden birini kullanıyorsanız, yalnızca önerileri uygulayın.

VanillaJS / TypeScript

VanillaJS veya TypeScript kullanırken, UnoCSS'in içeriği okumasına ve ayrıştırmasına izin vermek için js ve ts dosya uzantılarını eklemeniz gerekir, varsayılan olarak js ve ts dosyaları hariç tutulur, Yapı Araçları Pipeline'ından Çıkarma bölümüne bakın.

React

@vitejs/plugin-react kullanıyorsanız:

import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    React(),
    UnoCSS(),
  ],
}

@unocss/preset-attributify kullanıyorsanız build betiğinden tsc'yi kaldırmalısınız.

@vitejs/plugin-react ile @unocss/preset-attributify kullanıyorsanız, eklentiyi @vitejs/plugin-react'ten önce eklemelisiniz.

import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    React(),
  ],
}

Her iki eklentiyi de kullanan bir React örnek projesini examples/vite-react dizininde bulabilirsiniz, package.json'daki betikleri ve Vite yapılandırma dosyasını kontrol edin.

Preact

@preact/preset-vite kullanıyorsanız:

// vite.config.js
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}

Veya @prefresh/vite kullanıyorsanız:

// vite.config.js
import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Prefresh(),
  ],
}

@unocss/preset-attributify kullanıyorsanız, build betiğinden tsc'yi kaldırmalısınız.

Her iki eklentiyi de kullanan bir Preact örnek projesini examples/vite-preact dizininde bulabilirsiniz, package.json'daki betikleri ve Vite yapılandırma dosyasını kontrol edin.

Svelte

Eklenti @sveltejs/vite-plugin-svelte'den önce eklenmelidir.