Vite vtičnik

Vite vtičnik je priložen paketu unocss.

Namestitev

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Namestite vtičnik:

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

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

Ustvarite datoteko uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS možnosti
})

Dodajte virtual:uno.css v vašo glavno vstopno točko:

import 'virtual:uno.css'

Načini

Vite vtičnik prihaja z naborom načinov, ki omogočajo različna vedenja.

global (privzeto)

To je privzeti način za vtičnik: v tem načinu morate dodati uvoz uno.css v vaši vstopni točki.

Ta način omogoča nabor Vite vtičnikov za build in za dev s podporo HMR.

Generirani css bo globalna stilna datoteka, vbrizgana v index.html.

vue-scoped

Ta način bo vbrizgal generirani CSS v Vue SFC <style scoped> za izolacijo.

svelte-scoped

Način svelte-scoped je bil prestavljen v svoj paket, glejte @unocss/svelte-scoped/vite.

shadow-dom

Ker Web Components uporablja Shadow DOM, ni mogoče stilizirati vsebine neposredno iz globalne stilne datoteke (razen če uporabljate CSS custom properties, ti bodo prodrli skozi Shadow DOM), morate vgraditi generirani CSS s strani vtičnika v Shadow DOM stil.

Za vgradnjo generiranega CSS morate le konfigurirati način vtičnika na shadow-dom in vključiti čarobno mesto @unocss-placeholder v vsakem stilnem CSS bloku web komponente. Če definirate vaše Web Components v Vue SFC in želite definirati prilagojene stile skupaj z UnoCSS, lahko ovijete mesto v CSS komentar, da se izognete napakam v vašem IDE.

per-module (eksperimentalno)

Ta način bo generiral CSS datoteko za vsak modul, lahko je omejen.

dist-chunk (eksperimentalno)

Ta način bo generiral CSS datoteko za vsak kos kode ob gradnji, odlično za MPA.

Urejanje razredov v DevTools

Zaradi omejitve "na-zahtevo", kjer DevTools še ne vedo tistih, ki jih še niste uporabili v vaši izvorni kodi. Torej, če želite preizkusiti, kako stvari delujejo z neposredno spreminjanjem razredov v DevTools, dodajte naslednje vrstice v vašo glavno vstopno točko.

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

WARNING

Prosimo, uporabljajte previdno, pod kapo uporabljamo MutationObserver za zaznavanje sprememb razredov. Kar pomeni, da ne bodo le vaše ročne spremembe, ampak tudi spremembe, ki jih naredijo vaši skripti, zaznane in vključene v stilno datoteko. To lahko povzroči nekaj neskladij med razvojem in produkcijsko gradnjo, ko dodajate dinamične razrede na podlagi logike v scriptnih oznakah. Priporočamo, da dinamične dele dodate na safelist ali nastavite UI regresijske teste za vašo produkcijsko gradnjo, če je mogoče.

Frameworki

Nekateri UI/App frameworki imajo nekaj opomb, ki jih je treba popraviti, da bo delovalo, če uporabljate enega od naslednjih frameworkov, uporabite predloge.

VanillaJS / TypeScript

Ko uporabljate VanillaJS ali TypeScript, morate dodati razširitve datotek js in ts, da omogočite UnoCSS branje in parsiranje vsebine, privzeto so datoteke js in ts izključene, preverite razdelek Ekstrakcija iz cevovoda gradbenih orodij.

React

Če uporabljate @vitejs/plugin-react:

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

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

Če uporabljate @unocss/preset-attributify, morate odstraniti tsc iz skripte build.

Če uporabljate @vitejs/plugin-react z @unocss/preset-attributify, morate dodati vtičnik pred @vitejs/plugin-react.

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

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

Primer projekta React, ki uporablja oba vtičnika, najdete v imeniku examples/vite-react, preverite skripte v package.json in konfiguracijski datoteki Vite.

Preact

Če uporabljate @preact/preset-vite:

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

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

Ali če uporabljate @prefresh/vite:

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

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

Če uporabljate @unocss/preset-attributify, morate odstraniti tsc iz skripte build.

Primer projekta Preact, ki uporablja oba vtičnika, najdete v imeniku examples/vite-preact, preverite skripte v package.json in konfiguracijski datoteki Vite.

Svelte

Vtičnik mora biti dodan pred @sveltejs/vite-plugin-svelte.

Za podporo class:foo in class:foo={bar}, dodajte vtičnik in konfigurirajte extractorSvelte v možnosti extractors.

Lahko uporabite preprosta pravila za class: kot class:bg-red-500={foo} ali uporabite shortcuts, ki vsebujejo več pravil, glejte src/App.svelte v primeru projekta, povezanem spodaj.

// 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(),
      ],
      /* več možnosti */
    }),
    svelte(),
  ],
}

Sveltekit

Za podporo class:foo in class:foo={bar}, dodajte vtičnik in konfigurirajte extractorSvelte v možnosti extractors.

Lahko uporabite preprosta pravila za class: kot class:bg-red-500={foo} ali uporabite shortcuts, ki vsebujejo več pravil, glejte src/routes/+layout.svelte v primeru projekta, povezanem spodaj.

// 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(),
      ],
      /* več možnosti */
    }),
    sveltekit(),
  ],
}

Web Components

Za delo z web komponentami morate omogočiti način shadow-dom na vtičniku.

Ne pozabite odstraniti uvoza za uno.css, saj način shadow-dom ne bo razkril in aplikacija ne bo delovala.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* več možnosti */
    }),
  ],
}

Na vsaki web component dodajte @unocss-placeholder v stilski CSS blok:

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

Če uporabljate Lit:

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

Primer projekta Web Components imate v imeniku examples/vite-lit.

::part vgrajena podpora

Lahko uporabite ::part, saj vtičnik podpira to prek shortcuts in uporabo pravila part-[<part-name>]:<rule|shortcut> iz preset-mini, na primer uporaba s preprostimi pravili kot part-[<part-name>]:bg-green-500 ali uporaba nekaj shortcut: preverite src/my-element.ts v povezanem primeru projekta spodaj.

part-[<part-name>]:<rule|shortcut> bo delovalo le s tem vtičnikom z uporabo načina shadow-dom.

Vtičnik uporablja nth-of-type za izogibanje trkom z več deli v isti web komponenti in za iste dele na različnih web komponentah, vam ni treba skrbeti za to, vtičnik bo poskrbel za vas.

// 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' },
      ],
      /* več možnosti */
    }),
  ],
}

nato v vaših web komponentah:

// 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

Vtičnik vite-plugin-solid morate dodati za vtičnikom UnoCSS.

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

export default {
  plugins: [
    UnoCSS({
      /* možnosti */
    }),
    solidPlugin(),
  ],
}

Primer projekta Solid najdete v imeniku examples/vite-solid.

Elm

Vtičnik vite-plugin-elm morate dodati pred vtičnikom UnoCSS.

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

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

Primer projekta Elm najdete v imeniku examples/vite-elm.

Primeri

Osnovni primer

Osnovni primer projekta Vite najdete v imeniku examples/vite-basic.

Primeri frameworkov

Zagotavljamo primere projektov za različne frameworke:

• Vite React Primer
• Vite Preact Primer
• Vite Svelte Primer
• Vite Vue Primer

Zmogljivost