Vite Plugin

Vite-plugin levereras med unocss-paketet.

Installation

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Installera plugin:

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

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

Skapa en uno.config.ts-fil:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS-alternativ
})

Lägg till virtual:uno.css i din huvudentré:

import 'virtual:uno.css'

Lägen

Vite-plugin levereras med en uppsättning lägen som möjliggör olika beteenden.

global (standard)

Detta är standardläget för plugin: i detta läge måste du lägga till importen av uno.css på din entrépunkt.

Detta läge aktiverar en uppsättning Vite-plugins för build och för dev med HMR-stöd.

Den genererade css kommer att vara en global stylesheet som injiceras på index.html.

vue-scoped

Detta läge kommer att injicera genererad CSS till Vue SFCs <style scoped> för isolering.

svelte-scoped

svelte-scoped-läget har flyttats till sitt eget paket, se @unocss/svelte-scoped/vite.

shadow-dom

Eftersom Web Components använder Shadow DOM, finns det inget sätt att styla innehåll direkt från en global stylesheet (såvida du inte använder CSS custom properties, dessa kommer att penetrera Shadow DOM), du måste inline:a den genererade CSS:en av plugin i Shadow DOM-stilen.

För att inline:a den genererade CSS:en behöver du bara konfigurera plugin-läget till shadow-dom och inkludera @unocss-placeholder magisk platshållare på varje web component-stil CSS-block. Om du definierar dina Web Components i Vue SFCs och vill definiera anpassade stilar tillsammans med UnoCSS, kan du wrapa platshållaren i en CSS-kommentar för att undvika syntaxfel i din IDE.

per-module (experimentell)

Detta läge kommer att generera ett CSS-ark för varje modul, kan vara scopat.

dist-chunk (experimentell)

Detta läge kommer att generera ett CSS-ark för varje kodchunk vid bygge, bra för MPA.

Redigera klasser i DevTools

På grund av begränsningen av "on-demand" där DevTools inte vet de du inte har använt i din källkod ännu. Så om du vill prova hur saker fungerar genom att direkt ändra klasserna i DevTools, lägg bara till följande rader till din huvudentré.

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

WARNING

Använd det med försiktighet, under huven använder vi MutationObserver för att upptäcka klassändringar. Vilket innebär att inte bara dina manuella ändringar utan också ändringar gjorda av dina skript kommer att upptäckas och inkluderas i stylesheet. Detta kan orsaka viss feljustering mellan dev och produktionsbygget när du lägger till dynamiska klasser baserat på viss logik i script-taggar. Vi rekommenderar att lägga till dina dynamiska delar till safelist eller setup UI-regressionstester för ditt produktionsbygge om möjligt.

Ramverk

Vissa UI/App-ramverk har vissa fallgropar som måste fixas för att få det att fungera, om du använder ett av följande ramverk, tillämpa bara förslagen.

VanillaJS / TypeScript

När du använder VanillaJS eller TypeScript måste du lägga till js och ts filextensioner för att tillåta UnoCSS att läsa och parsa innehållet, som standard är js och ts filer exkluderade, kolla Extrahering från byggverktygs-pipeline-sektionen.

React

Om du använder @vitejs/plugin-react:

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

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

Om du använder @unocss/preset-attributify bör du ta bort tsc från build-scriptet.

Om du använder @vitejs/plugin-react med @unocss/preset-attributify, måste du lägga till plugin före @vitejs/plugin-react.

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

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

Du kan hitta ett React-exempelprojekt som använder båda plugins i examples/vite-react-katalogen, kolla scripten i package.json och Vite-konfigurationsfilen.

Preact

Om du använder @preact/preset-vite:

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

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

Eller om du använder @prefresh/vite:

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

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

Om du använder @unocss/preset-attributify, bör du ta bort tsc från build-scriptet.

Du kan hitta ett Preact-exempelprojekt som använder båda plugins i examples/vite-preact-katalogen, kolla scripten i package.json och Vite-konfigurationsfilen.

Svelte

Plugin måste läggas till före @sveltejs/vite-plugin-svelte.

För att stödja class:foo och class:foo={bar}, lägg till plugin och konfigurera extractorSvelte i extractors-alternativet.

Du kan använda enkla regler för class: som class:bg-red-500={foo} eller använda shortcuts som innehåller flera regler, se src/App.svelte i exempelprojektet länkad nedan.

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

Sveltekit

För att stödja class:foo och class:foo={bar}, lägg till plugin och konfigurera extractorSvelte i extractors-alternativet.

Du kan använda enkla regler för class: som class:bg-red-500={foo} eller använda shortcuts som innehåller flera regler, se src/routes/+layout.svelte i exempelprojektet länkad nedan.

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

Web Components

För att arbeta med web components måste du aktivera shadow-dom-läget på plugin.

Glöm inte att ta bort importen för uno.css eftersom shadow-dom-läget inte kommer att exponera det och applikationen kommer inte att fungera.

import UnoCSS from 'unocss/vite'

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

På varje web component lägg bara till @unocss-placeholder till dess stil CSS-block:

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

Om du använder Lit:

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

Du har ett Web Components-exempelprojekt i examples/vite-lit-katalogen.

::part inbyggt stöd

Du kan använda ::part eftersom plugin stöder det via shortcuts och använder part-[<part-name>]:<rule|shortcut>-regel från preset-mini, till exempel att använda det med enkla regler som part-[<part-name>]:bg-green-500 eller använda någon shortcut: kolla src/my-element.ts på länkat exempelprojekt nedan.

part-[<part-name>]:<rule|shortcut> kommer bara att fungera med denna plugin som använder shadow-dom-läget.

Plugin använder nth-of-type för att undvika kollisioner med flera delar i samma web component och för samma delar på olika web components, du behöver inte oroa dig för det, plugin kommer att ta hand om det för dig.

// 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' },
      ],
      /* fler alternativ */
    }),
  ],
}

sedan i dina 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

Du behöver lägga till vite-plugin-solid-plugin efter UnoCSS:s plugin.

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

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

Du kan hitta ett Solid-exempelprojekt i examples/vite-solid-katalogen.

Elm

Du behöver lägga till vite-plugin-elm-plugin före 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(),
  ],
})

Du kan hitta ett Elm-exempelprojekt i examples/vite-elm-katalogen.

Exempel

Grundläggande exempel

Du kan hitta ett grundläggande Vite-exempelprojekt i examples/vite-basic-katalogen.

Ramverksexempel

Vi tillhandahåller exempelprojekt för olika ramverk:

• Vite React Exempel
• Vite Preact Exempel
• Vite Svelte Exempel
• Vite Vue Exempel

Prestanda