Vite प्लगइन

Vite प्लगइन unocss पैकेज के साथ आता है।

इंस्टॉलेशन

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

प्लगइन इंस्टॉल करें:

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

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

uno.config.ts फ़ाइल बनाएं:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS विकल्प
})

अपने मुख्य एंट्री में virtual:uno.css जोड़ें:

import 'virtual:uno.css'

मोड

Vite प्लगइन मोडों का एक सेट आता है जो विभिन्न व्यवहारों को सक्षम करता है।

global (डिफ़ॉल्ट)

यह प्लगइन के लिए डिफ़ॉल्ट मोड है: इस मोड में आपको अपने एंट्री पॉइंट पर uno.css का आयात जोड़ने की आवश्यकता है।

यह मोड HMR समर्थन के साथ build और dev के लिए Vite प्लगइन्स का एक सेट सक्षम करता है।

जेनरेट की गई css index.html पर इंजेक्ट की गई एक ग्लोबल स्टाइलशीट होगी।

vue-scoped

यह मोड अलगाव के लिए Vue SFCs <style scoped> में जेनरेट की गई CSS को इंजेक्ट करेगा।

svelte-scoped

svelte-scoped मोड को अपने स्वयं के पैकेज में ले जाया गया है, @unocss/svelte-scoped/vite देखें।

shadow-dom

चूंकि Web Components Shadow DOM का उपयोग करता है, इसलिए ग्लोबल स्टाइलशीट से सीधे सामग्री को स्टाइल करने का कोई तरीका नहीं है (जब तक आप CSS कस्टम प्रॉपर्टीज़ का उपयोग नहीं करते हैं, वे Shadow DOM में प्रवेश करेंगे), आपको प्लगइन द्वारा जेनरेट की गई CSS को Shadow DOM स्टाइल में इनलाइन करने की आवश्यकता है।

जेनरेट की गई CSS को इनलाइन करने के लिए, आपको केवल प्लगइन मोड को shadow-dom कॉन्फ़िगर करने की आवश्यकता है और प्रत्येक वेब कंपोनेंट स्टाइल CSS ब्लॉक पर @unocss-placeholder मैजिक प्लेसहोल्डर शामिल करना है। यदि आप Vue SFCs में अपने Web Components को परिभाषित कर रहे हैं और UnoCSS के साथ कस्टम स्टाइल्स को परिभाषित करना चाहते हैं, तो आप अपने IDE में सिंटैक्स त्रुटियों से बचने के लिए प्लेसहोल्डर को CSS कमेंट में लपेट सकते हैं।

per-module (प्रायोगिक)

यह मोड प्रत्येक मॉड्यूल के लिए एक CSS शीट जेनरेट करेगा, स्कोप किया जा सकता है।

dist-chunk (प्रायोगिक)

यह मोड बिल्ड पर प्रत्येक कोड चंक के लिए एक CSS शीट जेनरेट करेगा, MPA के लिए बेहतरीन।

DevTools में क्लासेस संपादित करें

"ऑन-डिमांड" की सीमा के कारण जहाँ DevTools उन्हें नहीं जानते हैं जिन्हें आपने अभी तक अपने स्रोत कोड में उपयोग नहीं किया है। इसलिए यदि आप DevTools में सीधे क्लासेस बदलकर यह आज़माना चाहते हैं कि चीजें कैसे काम करती हैं, तो बस अपने मुख्य एंट्री में निम्न पंक्तियाँ जोड़ें।

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

WARNING

कृपया इसका उपयोग सावधानीपूर्वक करें, अंतर्निहित रूप से हम क्लास परिवर्तनों का पता लगाने के लिए MutationObserver का उपयोग करते हैं। जिसका अर्थ है कि न केवल आपके मैन्युअल परिवर्तन बल्कि आपके स्क्रिप्ट द्वारा किए गए परिवर्तन भी पता लगाए जाएंगे और स्टाइलशीट में शामिल किए जाएंगे। जब आप स्क्रिप्ट टैग में कुछ तर्क के आधार पर गतिशील क्लासेस जोड़ते हैं तो इससे dev और प्रोडक्शन बिल्ड के बीच कुछ गड़बड़ हो सकती है। हमने अपने गतिशील हिस्सों को सेफलिस्ट में जोड़ने की सलाह दी है या यदि संभव हो तो अपने प्रोडक्शन बिल्ड के लिए UI रिग्रेशन टेस्ट सेटअप करें।

फ्रेमवर्क

कुछ UI/ऐप फ्रेमवर्क में कुछ समस्याएँ होती हैं जिन्हें इसे काम करने के लिए ठीक किया जाना चाहिए, यदि आप निम्नलिखित फ्रेमवर्क में से किसी एक का उपयोग कर रहे हैं, तो बस सुझाव लागू करें।

VanillaJS / TypeScript

VanillaJS या TypeScript का उपयोग करते समय, आपको UnoCSS को सामग्री पढ़ने और पार्स करने की अनुमति देने के लिए js और ts फ़ाइलें एक्सटेंशन जोड़ने की आवश्यकता है, डिफ़ॉल्ट रूप से js और ts फ़ाइलें बाहर रखी गई हैं, बिल्ड टूल्स पाइपलाइन से निकालना अनुभाग देखें।

React

यदि आप @vitejs/plugin-react का उपयोग कर रहे हैं:

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

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

यदि आप @unocss/preset-attributify का उपयोग कर रहे हैं तो आपको build स्क्रिप्ट से tsc हटाना चाहिए।

यदि आप @vitejs/plugin-react का उपयोग @unocss/preset-attributify के साथ कर रहे हैं, तो आपको @vitejs/plugin-react से पहले प्लगइन जोड़ना चाहिए।

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

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

आप examples/vite-react डायरेक्टरी में दोनों प्लगइन्स का उपयोग करते हुए एक React उदाहरण प्रोजेक्ट पा सकते हैं, package.json और Vite कॉन्फ़िग फ़ाइल में स्क्रिप्ट देखें।

Preact

यदि आप @preact/preset-vite का उपयोग करते हैं:

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

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

या यदि आप @prefresh/vite का उपयोग करते हैं:

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

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

यदि आप @unocss/preset-attributify का उपयोग करते हैं, तो आपको build स्क्रिप्ट से tsc हटाना चाहिए।

आप examples/vite-preact डायरेक्टरी में दोनों प्लगइन्स का उपयोग करते हुए एक Preact उदाहरण प्रोजेक्ट पा सकते हैं, package.json और Vite कॉन्फ़िग फ़ाइल में स्क्रिप्ट देखें।

Svelte

प्लगइन को @sveltejs/vite-plugin-svelte से पहले जोड़ा जाना चाहिए।

class:foo और class:foo={bar} को समर्थन करने के लिए, प्लगइन जोड़ें और extractors विकल्प में extractorSvelte कॉन्फ़िगर करें।

आप class: के लिए सरल नियमों का उपयोग कर सकते हैं जैसे class:bg-red-500={foo} या कई नियमों वाले shortcuts का उपयोग कर सकते हैं, नीचे लिंक किए गए उदाहरण प्रोजेक्ट में src/App.svelte देखें।

// vite.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* अधिक विकल्प */
    }),
    svelte(),
  ],
}

Sveltekit

class:foo और class:foo={bar} को समर्थन करने के लिए, प्लगइन जोड़ें और extractors विकल्प में extractorSvelte कॉन्फ़िगर करें।

आप class: के लिए सरल नियमों का उपयोग कर सकते हैं जैसे class:bg-red-500={foo} या कई नियमों वाले shortcuts का उपयोग कर सकते हैं, नीचे लिंक किए गए उदाहरण प्रोजेक्ट में src/routes/+layout.svelte देखें।

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* अधिक विकल्प */
    }),
    sveltekit(),
  ],
}

Web Components

वेब कंपोनेंट्स के साथ काम करने के लिए आपको प्लगइन पर shadow-dom मोड सक्षम करने की आवश्यकता है।

uno.css के लिए आयात को हटाना न भूलें क्योंकि shadow-dom मोड इसे एक्सपोज़ नहीं करेगा और एप्लिकेशन काम नहीं करेगा।

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* अधिक विकल्प */
    }),
  ],
}

प्रत्येक web component पर बस इसके स्टाइल CSS ब्लॉक में @unocss-placeholder जोड़ें:

const template = document.createElement('template')
template.innerHTML = `
<style>
:host {...}
@unocss-placeholder
</style>
<div class="m-1em">
...
</div>
`

यदि आप Lit का उपयोग कर रहे हैं:

@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host {...}
    @unocss-placeholder
  `
  // ...
}

आपके पास examples/vite-lit डायरेक्टरी में एक Web Components उदाहरण प्रोजेक्ट है।

::part अंतर्निहित समर्थन

आप ::part का उपयोग कर सकते हैं क्योंकि प्लगइन इसे shortcuts के माध्यम से समर्थित करता है और preset-mini से part-[<part-name>]:<rule|shortcut> नियम का उपयोग करता है, उदाहरण के लिए इसका उपयोग सरल नियमों जैसे part-[<part-name>]:bg-green-500 के साथ या कुछ shortcut का उपयोग करके: नीचे लिंक किए गए उदाहरण प्रोजेक्ट में src/my-element.ts देखें।

part-[<part-name>]:<rule|shortcut> केवल इस प्लगइन के साथ shadow-dom मोड का उपयोग करके काम करेगा।

प्लगइन एक ही वेब कंपोनेंट में कई भागों के साथ और अलग-अलग वेब कंपोनेंट्स पर समान भागों के साथ टकराव से बचने के लिए nth-of-type का उपयोग करता है, आपको इसके बारे में चिंता करने की आवश्यकता नहीं है, प्लगइन आपके लिए देखभाल करेगा।

// vite.config.js
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      shortcuts: [
        { 'cool-blue': 'bg-blue-500 text-white' },
        { 'cool-green': 'bg-green-500 text-black' },
      ],
      /* अधिक विकल्प */
    }),
  ],
}

फिर अपने वेब कंपोनेंट्स में:

// my-container-wc.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<my-wc-with-parts class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-green">...</my-wc-with-parts>
`

// my-wc-with-parts.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<div>
  <div part="cool-part">...</div>
  <div part="another-cool-part">...</div>
</div>
`

Solid

आपको UnoCSS के प्लगइन के बाद vite-plugin-solid प्लगइन जोड़ने की आवश्यकता है।

// vite.config.js
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS({
      /* विकल्प */
    }),
    solidPlugin(),
  ],
}

आप examples/vite-solid डायरेक्टरी में एक Solid उदाहरण प्रोजेक्ट पा सकते हैं।

Elm

आपको UnoCSS के प्लगइन से पहले vite-plugin-elm प्लगइन जोड़ने की आवश्यकता है।

// vite.config.js
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import Elm from 'vite-plugin-elm'

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

आप examples/vite-elm डायरेक्टरी में एक Elm उदाहरण प्रोजेक्ट पा सकते हैं।

उदाहरण

बेसिक उदाहरण

आप examples/vite-basic डायरेक्टरी में एक बेसिक Vite उदाहरण प्रोजेक्ट पा सकते हैं।

फ्रेमवर्क उदाहरण

हम विभिन्न फ्रेमवर्क के लिए उदाहरण प्रोजेक्ट प्रदान करते हैं:

• Vite React उदाहरण
• Vite Preact उदाहरण
• Vite Svelte उदाहरण
• Vite Vue उदाहरण

प्रदर्शन