Vite Plugin

De Vite plugin wordt geleverd met het unocss pakket.

Installatie

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Installeer de plugin:

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

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

Maak een uno.config.ts bestand:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS opties
})

Voeg virtual:uno.css toe aan je main entry:

import 'virtual:uno.css'

Modus

De Vite plugin wordt geleverd met een set van modi die verschillend gedrag inschakelen.

global (standaard)

Dit is de standaard modus voor de plugin: in deze modus moet je de import van uno.css toevoegen op je entry point.

Deze modus schakelt een set van Vite plugins in voor build en voor dev met HMR ondersteuning.

De gegenereerde css zal een global stylesheet zijn die wordt geïnjecteerd in de index.html.

vue-scoped

Deze modus zal gegenereerde CSS injecteren naar Vue SFCs <style scoped> voor isolatie.

svelte-scoped

svelte-scoped modus is verplaatst naar zijn eigen pakket, zie @unocss/svelte-scoped/vite.

shadow-dom

Omdat Web Components gebruik maakt van Shadow DOM, is er geen manier om content direct te stylen vanuit een global stylesheet (tenzij je CSS custom properties gebruikt, die zullen de Shadow DOM penetreren), je moet de gegenereerde CSS door de plugin inline in de Shadow DOM style plaatsen.

Om de gegenereerde CSS inline te plaatsen, hoef je alleen de plugin modus te configureren naar shadow-dom en @unocss-placeholder magic placeholder op te nemen in elk web component style CSS blok. Als je je Web Components definieert in Vue SFCs en aangepaste styles wilt definiëren naast UnoCSS, kun je de placeholder in een CSS comment wrappen om syntax errors in je IDE te voorkomen.

per-module (experimenteel)

Deze modus zal een CSS sheet genereren voor elke module, kan scoped zijn.

dist-chunk (experimenteel)

Deze modus zal een CSS sheet genereren voor elke code chunk op build, geweldig voor MPA.

Classes bewerken in DevTools

Vanwege de beperking van "on-demand" waar de DevTools die niet kent die je nog niet hebt gebruikt in je broncode. Dus als je wilt proberen hoe dingen werken door de classes direct in DevTools te veranderen, voeg je gewoon de volgende regels toe aan je main entry.

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

WARNING

Gebruik dit voorzichtig, onder de motorkap gebruiken we MutationObserver om de class veranderingen te detecteren. Wat betekent dat niet alleen je handmatige veranderingen maar ook de veranderingen gemaakt door je scripts zullen worden gedetecterd en opgenomen in de stylesheet. Dit kan wat verkeerde uitlijning veroorzaken tussen dev en de productie build wanneer je dynamische classes toevoegt op basis van wat logica in script tags. We raden aan om je dynamische onderdelen toe te voegen aan de safelist of UI regressietests op te zetten voor je productie build als dat mogelijk is.

Frameworks

Sommige UI/App frameworks hebben enkele caveats die moeten worden opgelost om het te laten werken, als je één van de volgende frameworks gebruikt, pas dan de suggesties toe.

VanillaJS / TypeScript

Bij het gebruik van VanillaJS of TypeScript, moet je js en ts bestands extensies toevoegen om UnoCSS toe te staan om de content te lezen en te parsen, standaard js en ts bestanden zijn uitgesloten, bekijk de Extraheren uit Build Tools Pipeline sectie.

React

Als je @vitejs/plugin-react gebruikt:

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

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

Als je @unocss/preset-attributify gebruikt, zou je tsc moeten verwijderen van het build script.

Als je @vitejs/plugin-react gebruikt met @unocss/preset-attributify, moet je de plugin toevoegen vóór @vitejs/plugin-react.

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

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

Je kunt een React voorbeeld project vinden dat beide plugins gebruikt in de examples/vite-react directory, bekijk de scripts in package.json en Vite config bestand.

Preact

Als je @preact/preset-vite gebruikt:

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

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

Of als je @prefresh/vite gebruikt:

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

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

Als je @unocss/preset-attributify gebruikt, zou je tsc moeten verwijderen van het build script.

Je kunt een Preact voorbeeld project vinden dat beide plugins gebruikt in de examples/vite-preact directory, bekijk de scripts in package.json en Vite config bestand.

Svelte

De plugin moet worden toegevoegd vóór @sveltejs/vite-plugin-svelte.

Om class:foo en class:foo={bar} te ondersteunen, voeg de plugin toe en configureer extractorSvelte in de extractors optie.

Je kunt eenvoudige regels gebruiken voor class: zoals class:bg-red-500={foo} of shortcuts gebruiken die meerdere regels bevatten, zie src/App.svelte in het voorbeeld project hieronder.

// 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(),
      ],
      /* meer opties */
    }),
    svelte(),
  ],
}

Sveltekit

Om class:foo en class:foo={bar} te ondersteunen, voeg de plugin toe en configureer extractorSvelte in de extractors optie.

Je kunt eenvoudige regels gebruiken voor class: zoals class:bg-red-500={foo} of shortcuts gebruiken die meerdere regels bevatten, zie src/routes/+layout.svelte in het voorbeeld project hieronder.

// 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(),
      ],
      /* meer opties */
    }),
    sveltekit(),
  ],
}

Web Components

Om te werken met web components moet je shadow-dom modus inschakelen op de plugin.

Vergeet niet de import voor uno.css te verwijderen aangezien de shadow-dom modus het niet zal blootstellen en de applicatie zal niet werken.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* meer opties */
    }),
  ],
}

Op elke web component voeg je gewoon @unocss-placeholder toe aan zijn style CSS blok:

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

Als je Lit gebruikt:

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

Je hebt een Web Components voorbeeld project in de examples/vite-lit directory.

::part ingebouwde ondersteuning

Je kunt ::part gebruiken aangezien de plugin het ondersteunt via shortcuts en door part-[<part-name>]:<rule|shortcut> regel te gebruiken van preset-mini, bijvoorbeeld door het te gebruiken met eenvoudige regels zoals part-[<part-name>]:bg-green-500 of door een shortcut te gebruiken: bekijk src/my-element.ts in het gelinkte voorbeeld project hieronder.

De part-[<part-name>]:<rule|shortcut> zal alleen werken met deze plugin die de shadow-dom modus gebruikt.

De plugin gebruikt nth-of-type om botsingen te vermijden met meerdere parts in hetzelfde web component en voor dezelfde parts op onderscheidende web components, hoef je je geen zorgen te maken, de plugin zal voor je zorgen.

// 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' },
      ],
      /* meer opties */
    }),
  ],
}

dan in je web components:

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

Je moet de vite-plugin-solid plugin toevoegen na de UnoCSS's plugin.

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

export default {
  plugins: [
    UnoCSS({
      /* opties */
    }),
    solidPlugin(),
  ],
}

Je kunt een Solid voorbeeld project vinden in de examples/vite-solid directory.

Elm

Je moet de vite-plugin-elm plugin toevoegen vóór de UnoCSS's plugin.

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

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

Je kunt een Elm voorbeeld project vinden in de examples/vite-elm directory.

Voorbeelden

Basis Voorbeeld

Je kunt een basis Vite voorbeeld project vinden in de examples/vite-basic directory.

Framework Voorbeelden

We bieden voorbeeld projecten voor verschillende frameworks:

• Vite React Voorbeeld
• Vite Preact Voorbeeld
• Vite Svelte Voorbeeld
• Vite Vue Voorbeeld

Prestaties