Plugin Vite

Plugin Vite được cung cấp kèm theo gói unocss.

Cài đặt

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Cài đặt plugin:

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

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

Tạo một tệp uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...các tùy chọn UnoCSS
})

Thêm virtual:uno.css vào điểm vào chính của bạn:

import 'virtual:uno.css'

Chế độ

Plugin Vite đi kèm với một bộ chế độ cho phép các hành vi khác nhau.

global (mặc định)

Đây là chế độ mặc định cho plugin: trong chế độ này bạn cần thêm nhập uno.css vào điểm vào của bạn.

Chế độ này cho phép một bộ plugin Vite cho build và cho dev với hỗ trợ HMR.

css được tạo sẽ là một stylesheet toàn cục được tiêm vào index.html.

vue-scoped

Chế độ này sẽ tiêm CSS được tạo vào <style scoped> của Vue SFC để cô lập.

svelte-scoped

Chế độ svelte-scoped đã được di chuyển đến gói riêng của nó, xem @unocss/svelte-scoped/vite.

shadow-dom

Vì Web Components sử dụng Shadow DOM, không có cách nào để tạo kiểu nội dung trực tiếp từ một stylesheet toàn cục (trừ khi bạn sử dụng CSS custom properties, những thứ này sẽ xâm nhập Shadow DOM), bạn cần phải nội tuyến CSS được tạo bởi plugin vào kiểu Shadow DOM.

Để nội tuyến CSS được tạo, bạn chỉ cần cấu hình chế độ plugin thành shadow-dom và bao gồm placeholder ma thuật @unocss-placeholder trên mỗi khối CSS kiểu web component. Nếu bạn đang định nghĩa Web Components của mình trong Vue SFC và muốn định nghĩa các kiểu tùy chỉnh cùng với UnoCSS, bạn có thể bao bọc placeholder trong một bình luận CSS để tránh lỗi cú pháp trong IDE của bạn.

per-module (thí nghiệm)

Chế độ này sẽ tạo một bảng CSS cho mỗi module, có thể được phạm vi.

dist-chunk (thí nghiệm)

Chế độ này sẽ tạo một bảng CSS cho mỗi khối mã tại thời điểm xây dựng, tuyệt vời cho MPA.

Chỉnh sửa các lớp trong DevTools

Vì giới hạn của "theo yêu cầu" nơi DevTools không biết những thứ bạn chưa sử dụng trong mã nguồn của mình. Vì vậy, nếu bạn muốn thử cách mọi thứ hoạt động bằng cách trực tiếp thay đổi các lớp trong DevTools, chỉ cần thêm các dòng sau vào điểm vào chính của bạn.

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

WARNING

Vui lòng sử dụng nó một cách thận trọng, bên dưới lớp vỏ chúng tôi sử dụng MutationObserver để phát hiện các thay đổi lớp. Điều này có nghĩa là không chỉ các thay đổi thủ công của bạn mà cả các thay đổi được thực hiện bởi các tập lệnh của bạn cũng sẽ được phát hiện và bao gồm trong stylesheet. Điều này có thể gây ra một số sai lệch giữa dev và bản dựng sản xuất khi bạn thêm các lớp động dựa trên một số logic trong các thẻ script. Chúng tôi khuyên bạn nên thêm các phần động của mình vào safelist hoặc thiết lập các bài kiểm tra hồi quy UI cho bản dựng sản xuất của bạn nếu có thể.

Frameworks

Một số framework UI/App có một số cảnh báo phải được khắc phục để làm cho nó hoạt động, nếu bạn đang sử dụng một trong các framework sau, chỉ cần áp dụng các đề xuất.

VanillaJS / TypeScript

Khi sử dụng VanillaJS hoặc TypeScript, bạn cần thêm các phần mở rộng tệp js và ts để cho phép UnoCSS đọc và phân tích nội dung, theo mặc định các tệp js và ts bị loại trừ, xem phần Trích xuất từ Pipeline Công cụ Xây dựng.

React

Nếu bạn đang sử dụng @vitejs/plugin-react:

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

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

Nếu bạn đang sử dụng @unocss/preset-attributify bạn nên loại bỏ tsc khỏi tập lệnh build.

Nếu bạn đang sử dụng @vitejs/plugin-react với @unocss/preset-attributify, bạn phải thêm plugin trước @vitejs/plugin-react.

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

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

Bạn có thể tìm thấy một dự án ví dụ React sử dụng cả hai plugin trong thư mục examples/vite-react, kiểm tra các tập lệnh trong package.json và tệp cấu hình Vite.

Preact

Nếu bạn sử dụng @preact/preset-vite:

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

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

Hoặc nếu bạn sử dụng @prefresh/vite:

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

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

Nếu bạn sử dụng @unocss/preset-attributify, bạn nên loại bỏ tsc khỏi tập lệnh build.

Bạn có thể tìm thấy một dự án ví dụ Preact sử dụng cả hai plugin trong thư mục examples/vite-preact, kiểm tra các tập lệnh trong package.json và tệp cấu hình Vite.

Svelte

Plugin phải được thêm trước @sveltejs/vite-plugin-svelte.

Để hỗ trợ class:foo và class:foo={bar}, thêm plugin và cấu hình extractorSvelte trong tùy chọn extractors.

Bạn có thể sử dụng các quy tắc đơn giản cho class: như class:bg-red-500={foo} hoặc sử dụng shortcuts chứa nhiều quy tắc, xem src/App.svelte trong dự án ví dụ được liên kết dưới đây.

// 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(),
      ],
      /* nhiều tùy chọn hơn */
    }),
    svelte(),
  ],
}

Sveltekit

Để hỗ trợ class:foo và class:foo={bar}, thêm plugin và cấu hình extractorSvelte trong tùy chọn extractors.

Bạn có thể sử dụng các quy tắc đơn giản cho class: như class:bg-red-500={foo} hoặc sử dụng shortcuts chứa nhiều quy tắc, xem src/routes/+layout.svelte trong dự án ví dụ được liên kết dưới đây.

// 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(),
      ],
      /* nhiều tùy chọn hơn */
    }),
    sveltekit(),
  ],
}

Web Components

Để làm việc với các web component bạn cần bật chế độ shadow-dom trên plugin.

Đừng quên loại bỏ nhập cho uno.css vì chế độ shadow-dom sẽ không hiển thị nó và ứng dụng sẽ không hoạt động.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* nhiều tùy chọn hơn */
    }),
  ],
}

Trên mỗi web component chỉ cần thêm @unocss-placeholder vào khối CSS kiểu của nó:

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

Nếu bạn đang sử dụng Lit:

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

Bạn có một dự án ví dụ Web Components trong thư mục examples/vite-lit.

Hỗ trợ tích hợp ::part

Bạn có thể sử dụng ::part vì plugin hỗ trợ nó thông qua shortcuts và sử dụng quy tắc part-[<part-name>]:<rule|shortcut> từ preset-mini, ví dụ: sử dụng nó với các quy tắc đơn giản như part-[<part-name>]:bg-green-500 hoặc sử dụng một số shortcut: kiểm tra src/my-element.ts trên dự án ví dụ được liên kết dưới đây.

part-[<part-name>]:<rule|shortcut> sẽ chỉ hoạt động với plugin này sử dụng chế độ shadow-dom.

Plugin sử dụng nth-of-type để tránh xung đột với nhiều phần trong cùng một web component và cho cùng các phần trên các web component khác biệt, bạn không cần phải lo lắng về điều đó, plugin sẽ chăm sóc cho bạn.

// 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' },
      ],
      /* nhiều tùy chọn hơn */
    }),
  ],
}

sau đó trong các web component của bạn:

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

Bạn cần thêm plugin vite-plugin-solid sau plugin của UnoCSS.

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

export default {
  plugins: [
    UnoCSS({
      /* các tùy chọn */
    }),
    solidPlugin(),
  ],
}

Bạn có thể tìm thấy một dự án ví dụ Solid trong thư mục examples/vite-solid.

Elm

Bạn cần thêm plugin vite-plugin-elm trước plugin của 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(),
  ],
})

Bạn có thể tìm thấy một dự án ví dụ Elm trong thư mục examples/vite-elm.

Ví dụ

Ví dụ Cơ bản

Bạn có thể tìm thấy một dự án ví dụ Vite cơ bản trong thư mục examples/vite-basic.

Ví dụ Framework

Chúng tôi cung cấp các dự án ví dụ cho các framework khác nhau:

• Ví dụ Vite React
• Ví dụ Vite Preact
• Ví dụ Vite Svelte
• Ví dụ Vite Vue

Hiệu suất