Plugin Vite

Plugin-ul Vite este livrat cu pachetul unocss.

Instalare

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Instalați plugin-ul:

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

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

Creați un fișier uno.config.ts:

import { defineConfig } de la 'unocss'

export default defineConfig({
  // ...opțiuni UnoCSS
})

Adăugați virtual:uno.css la punctul dvs. principal de intrare:

import 'virtual:uno.css'

Moduri

Plugin-ul Vite vine cu o serie de moduri care permit diferite comportamente.

global (implicit)

Acesta este modul implicit pentru plugin: în acest mod trebuie să adăugați importul de uno.css în punctul dvs. de intrare.

Acest mod activează o serie de plugin-uri Vite pentru build și pentru dev cu suport HMR.

CSS-ul generat va fi o foaie de stil globală injectată în index.html.

vue-scoped

Acest mod va injecta CSS-ul generat în Vue SFC-uri <style scoped> pentru izolare.

svelte-scoped

Modul svelte-scoped a fost mutat în propriul său pachet, consultați @unocss/svelte-scoped/vite.

shadow-dom

Deoarece Web Components folosește Shadow DOM, nu există nicio modalitate de a stiliza conținutul direct dintr-o foaie de stil globală (decât dacă folosiți proprietăți CSS personalizate, acestea vor pătrunde în Shadow DOM), trebuie să în linie CSS-ul generat de plugin în stilul Shadow DOM.

Pentru a în linia CSS-ul generat, trebuie doar să configurați modul plugin-ului la shadow-dom și să includeți placeholder-ul magic @unocss-placeholder în fiecare bloc de stil CSS al componentei web. Dacă definiți componentele dvs. web în Vue SFC-uri și doriți să definiți stiluri personalizate alături de UnoCSS, puteți înfășura placeholder-ul într-un comentariu CSS pentru a evita erorile de sintaxă în IDE-ul dvs.

per-module (experimental)

Acest mod va genera o foaie CSS pentru fiecare modul, poate fi izolat.