Vite Plugin

Das Vite Plugin wird mit dem unocss Paket mitgeliefert.

Installation

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Plugin installieren:

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

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

Erstellen Sie eine uno.config.ts Datei:

import { defineConfig } from 'unocss'

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

Fügen Sie virtual:uno.css zu Ihrem Haupteinstiegspunkt hinzu:

import 'virtual:uno.css'

Modi

Das Vite Plugin kommt mit einer Reihe von Modi, die unterschiedliche Verhaltensweisen ermöglichen.

global (Standard)

Dies ist der Standardmodus für das Plugin: In diesem Modus müssen Sie den Import von uno.css an Ihrem Einstiegspunkt hinzufügen.

Dieser Modus aktiviert eine Reihe von Vite Plugins für build und für dev mit HMR Unterstützung.

Das generierte css wird ein globales Stylesheet sein, das in die index.html injiziert wird.

vue-scoped

Dieser Modus injiziert generiertes CSS in Vue SFCs <style scoped> zur Isolation.

svelte-scoped

Der svelte-scoped Modus wurde in sein eigenes Paket verschoben, siehe @unocss/svelte-scoped/vite.

shadow-dom

Da Web Components Shadow DOM verwenden, gibt es keine Möglichkeit, Inhalte direkt aus einem globalen Stylesheet zu stylen (es sei denn, Sie verwenden CSS custom properties, diese durchdringen das Shadow DOM), Sie müssen das generierte CSS des Plugins in den Shadow DOM Style inline einfügen.

Um das generierte CSS inline einzufügen, müssen Sie nur den Plugin-Modus auf shadow-dom konfigurieren und den @unocss-placeholder Magic-Platzhalter in jedem Web-Component-Style-CSS-Block einschließen. Wenn Sie Ihre Web Components in Vue SFCs definieren und benutzerdefinierte Styles neben UnoCSS definieren möchten, können Sie den Platzhalter in einen CSS-Kommentar einwickeln, um Syntaxfehler in Ihrer IDE zu vermeiden.

per-module (experimentell)

Dieser Modus generiert ein CSS-Sheet für jedes Modul, kann scoped sein.

dist-chunk (experimentell)

Dieser Modus generiert ein CSS-Sheet für jeden Code-Chunk beim Build, großartig für MPA.

Klassen in DevTools bearbeiten

Aufgrund der Einschränkung von "On-Demand", bei der die DevTools diejenigen nicht kennen, die Sie noch nicht in Ihrem Quellcode verwendet haben. Wenn Sie also ausprobieren möchten, wie Dinge funktionieren, indem Sie die Klassen direkt in den DevTools ändern, fügen Sie einfach die folgenden Zeilen zu Ihrem Haupteinstiegspunkt hinzu.

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

WARNING

Bitte verwenden Sie es mit Vorsicht, unter der Haube verwenden wir MutationObserver, um die Klassenänderungen zu erkennen. Das bedeutet, dass nicht nur Ihre manuellen Änderungen, sondern auch die Änderungen, die von Ihren Skripten vorgenommen werden, erkannt und in das Stylesheet aufgenommen werden. Dies könnte zu einer Fehlausrichtung zwischen Dev und dem Production Build führen, wenn Sie dynamische Klassen basierend auf einer Logik in Script-Tags hinzufügen. Wir empfehlen, Ihre dynamischen Teile zur safelist hinzuzufügen oder UI-Regressionstests für Ihren Production Build einzurichten, wenn möglich.

Frameworks

Einige UI/App-Frameworks haben einige Einschränkungen, die behoben werden müssen, damit es funktioniert. Wenn Sie eines der folgenden Frameworks verwenden, wenden Sie einfach die Vorschläge an.

VanillaJS / TypeScript

Bei Verwendung von VanillaJS oder TypeScript müssen Sie die Dateierweiterungen js und ts hinzufügen, damit UnoCSS den Inhalt lesen und parsen kann. Standardmäßig sind js und ts Dateien ausgeschlossen. Lesen Sie den Abschnitt Extrahieren aus Build-Tools-Pipeline.

React

Wenn Sie @vitejs/plugin-react verwenden:

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

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

Wenn Sie @unocss/preset-attributify verwenden, sollten Sie tsc aus dem build Skript entfernen.

Wenn Sie @vitejs/plugin-react mit @unocss/preset-attributify verwenden, müssen Sie das Plugin vor @vitejs/plugin-react hinzufügen.

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

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

Sie finden ein React Beispielprojekt, das beide Plugins verwendet, im examples/vite-react Verzeichnis. Überprüfen Sie die Skripte in package.json und die Vite-Konfigurationsdatei.

Preact

Wenn Sie @preact/preset-vite verwenden:

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

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

Oder wenn Sie @prefresh/vite verwenden:

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

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

Wenn Sie @unocss/preset-attributify verwenden, sollten Sie tsc aus dem build Skript entfernen.

Sie finden ein Preact Beispielprojekt, das beide Plugins verwendet, im examples/vite-preact Verzeichnis. Überprüfen Sie die Skripte in package.json und die Vite-Konfigurationsdatei.

Svelte

Das Plugin muss vor @sveltejs/vite-plugin-svelte hinzugefügt werden.

Um class:foo und class:foo={bar} zu unterstützen, fügen Sie das Plugin hinzu und konfigurieren Sie extractorSvelte in der extractors Option.

Sie können einfache Regeln für class: wie class:bg-red-500={foo} verwenden oder shortcuts verwenden, die mehrere Regeln enthalten. Siehe src/App.svelte im unten verlinkten Beispielprojekt.

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

Sveltekit

Um class:foo und class:foo={bar} zu unterstützen, fügen Sie das Plugin hinzu und konfigurieren Sie extractorSvelte in der extractors Option.

Sie können einfache Regeln für class: wie class:bg-red-500={foo} verwenden oder shortcuts verwenden, die mehrere Regeln enthalten. Siehe src/routes/+layout.svelte im unten verlinkten Beispielprojekt.

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

Web Components

Um mit Web Components zu arbeiten, müssen Sie den shadow-dom Modus im Plugin aktivieren.

Vergessen Sie nicht, den Import für uno.css zu entfernen, da der shadow-dom Modus es nicht freigibt und die Anwendung nicht funktionieren wird.

import UnoCSS from 'unocss/vite'

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

Fügen Sie in jeder Web Component einfach @unocss-placeholder zu ihrem Style-CSS-Block hinzu:

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

Wenn Sie Lit verwenden:

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

Sie haben ein Web Components Beispielprojekt im examples/vite-lit Verzeichnis.

::part eingebaute Unterstützung

Sie können ::part verwenden, da das Plugin es über shortcuts und die Verwendung der part-[<part-name>]:<rule|shortcut> Regel aus preset-mini unterstützt. Verwenden Sie es beispielsweise mit einfachen Regeln wie part-[<part-name>]:bg-green-500 oder verwenden Sie einen shortcut. Überprüfen Sie src/my-element.ts im unten verlinkten Beispielprojekt.

Die part-[<part-name>]:<rule|shortcut> funktioniert nur mit diesem Plugin unter Verwendung des shadow-dom Modus.

Das Plugin verwendet nth-of-type, um Kollisionen mit mehreren Parts in derselben Web Component und für dieselben Parts in verschiedenen Web Components zu vermeiden. Sie müssen sich keine Sorgen machen, das Plugin kümmert sich darum.

// 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' },
      ],
      /* weitere Optionen */
    }),
  ],
}

dann in Ihren 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

Sie müssen das vite-plugin-solid Plugin nach dem UnoCSS Plugin hinzufügen.

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

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

Sie finden ein Solid Beispielprojekt im examples/vite-solid Verzeichnis.

Elm

Sie müssen das vite-plugin-elm Plugin vor dem UnoCSS Plugin hinzufügen.

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

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

Sie finden ein Elm Beispielprojekt im examples/vite-elm Verzeichnis.

Beispiele

Grundlegendes Beispiel

Sie finden ein grundlegendes Vite Beispielprojekt im examples/vite-basic Verzeichnis.

Framework-Beispiele

Wir bieten Beispielprojekte für verschiedene Frameworks:

• Vite React Beispiel
• Vite Preact Beispiel
• Vite Svelte Beispiel
• Vite Vue Beispiel

Performance