Vite Plugin

Vite 플러그인은 unocss 패키지와 함께 제공됩니다.

설치

pnpmyarnnpmbun

bash

pnpm add -D unocss

bash

yarn add -D unocss

bash

npm install -D unocss

bash

bun add -D unocss

플러그인을 설치하세요:

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

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

uno.config.ts 파일을 생성하세요:

import { defineConfig } from 'unocss'

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

메인 엔트리에 virtual:uno.css를 추가하세요:

import 'virtual:uno.css'

모드

Vite 플러그인은 다양한 동작을 활성화하는 모드 세트와 함께 제공됩니다.

`global` (기본값)

이것은 플러그인의 기본 모드입니다: 이 모드에서는 엔트리 포인트에 uno.css의 import를 추가해야 합니다.

이 모드는 build용과 HMR 지원이 있는 dev용 Vite 플러그인 세트를 활성화합니다.

생성된 css는 index.html에 주입되는 전역 스타일시트가 됩니다.

`vue-scoped`

이 모드는 생성된 CSS를 Vue SFC의 <style scoped>에 주입하여 격리를 제공합니다.

`svelte-scoped`

svelte-scoped 모드는 자체 패키지로 이동되었습니다. @unocss/svelte-scoped/vite를 참조하세요.

`shadow-dom`

Web Components는 Shadow DOM을 사용하므로 전역 스타일시트에서 직접 콘텐츠를 스타일링할 수 없습니다 (CSS custom properties를 사용하지 않는 한, 이는 Shadow DOM을 관통합니다). 플러그인에 의해 생성된 CSS를 Shadow DOM 스타일에 인라인으로 포함해야 합니다.

생성된 CSS를 인라인으로 포함하려면 플러그인 모드를 shadow-dom으로 구성하고 각 웹 컴포넌트 스타일 CSS 블록에 @unocss-placeholder 마법 플레이스홀더를 포함하면 됩니다. Vue SFC에서 Web Components를 정의하고 UnoCSS와 함께 사용자 정의 스타일을 정의하려면 IDE에서 구문 오류를 피하기 위해 CSS 주석으로 플레이스홀더를 감쌀 수 있습니다.

`per-module` (실험적)

이 모드는 각 모듈에 대해 CSS 시트를 생성하며, 스코프를 가질 수 있습니다.

`dist-chunk` (실험적)

이 모드는 빌드 시 각 코드 청크에 대해 CSS 시트를 생성하며, MPA에 적합합니다.

DevTools에서 클래스 편집

"온디맨드"의 제한으로 인해 DevTools는 소스 코드에서 아직 사용하지 않은 것들을 알 수 없습니다. 따라서 DevTools에서 직접 클래스를 변경하여 작동 방식을 시도하려면 메인 엔트리에 다음 줄을 추가하세요.

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

WARNING

주의해서 사용하세요. 내부적으로 MutationObserver를 사용하여 클래스 변경을 감지합니다. 이는 수동 변경뿐만 아니라 스크립트에 의한 변경도 감지되어 스타일시트에 포함됨을 의미합니다. 스크립트 태그의 일부 로직을 기반으로 동적 클래스를 추가할 때 개발과 프로덕션 빌드 간에 일부 불일치가 발생할 수 있습니다. 동적 부분을 safelist에 추가하거나 가능한 경우 프로덕션 빌드에 대한 UI 회귀 테스트를 설정하는 것을 권장합니다.

프레임워크

일부 UI/App 프레임워크에는 작동하기 위해 수정해야 하는 주의사항이 있습니다. 다음 프레임워크 중 하나를 사용하는 경우 제안사항을 적용하세요.

VanillaJS / TypeScript

VanillaJS 또는 TypeScript를 사용할 때 UnoCSS가 콘텐츠를 읽고 파싱할 수 있도록 js 및 ts 파일 확장자를 추가해야 합니다. 기본적으로 js 및 ts 파일은 제외됩니다. Extracting from Build Tools Pipeline 섹션을 확인하세요.

React

@vitejs/plugin-react를 사용하는 경우:

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

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

@unocss/preset-attributify를 사용하는 경우 build 스크립트에서 tsc를 제거해야 합니다.

@vitejs/plugin-react와 @unocss/preset-attributify를 함께 사용하는 경우 플러그인을 @vitejs/plugin-react보다 먼저 추가해야 합니다.

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

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

두 플러그인을 모두 사용하는 React 예제 프로젝트가 examples/vite-react 디렉토리에 있습니다. package.json의 스크립트와 Vite 설정 파일을 확인하세요.

Preact

@preact/preset-vite를 사용하는 경우:

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

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

또는 @prefresh/vite를 사용하는 경우:

import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

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

@unocss/preset-attributify를 사용하는 경우 build 스크립트에서 tsc를 제거해야 합니다.

두 플러그인을 모두 사용하는 Preact 예제 프로젝트가 examples/vite-preact 디렉토리에 있습니다. package.json의 스크립트와 Vite 설정 파일을 확인하세요.

Svelte

플러그인을 @sveltejs/vite-plugin-svelte보다 먼저 추가해야 합니다.

class:foo와 class:foo={bar}를 지원하려면 플러그인을 추가하고 extractors 옵션에서 extractorSvelte를 구성하세요.

class:와 함께 간단한 규칙을 사용할 수 있습니다. 예를 들어 class:bg-red-500={foo} 또는 shortcuts를 사용하여 여러 규칙을 포함할 수 있습니다. 아래 링크된 예제 프로젝트의 src/App.svelte를 참조하세요.

import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    svelte(),
  ],
}

Sveltekit

class:foo와 class:foo={bar}를 지원하려면 플러그인을 추가하고 extractors 옵션에서 extractorSvelte를 구성하세요.

class:와 함께 간단한 규칙을 사용할 수 있습니다. 예를 들어 class:bg-red-500={foo} 또는 shortcuts를 사용하여 여러 규칙을 포함할 수 있습니다. 아래 링크된 예제 프로젝트의 src/routes/+layout.svelte를 참조하세요.

import { sveltekit } from '@sveltejs/kit/vite'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    sveltekit(),
  ],
})

Web Components

웹 컴포넌트와 함께 작동하려면 플러그인에서 shadow-dom 모드를 활성화해야 합니다.

shadow-dom 모드는 uno.css를 노출하지 않으므로 uno.css의 import를 제거하는 것을 잊지 마세요. 그렇지 않으면 애플리케이션이 작동하지 않습니다.

import UnoCSS from 'unocss/vite'

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

각 web component의 스타일 CSS 블록에 @unocss-placeholder를 추가하세요:

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

Lit을 사용하는 경우:

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

Web Components 예제 프로젝트가 examples/vite-lit 디렉토리에 있습니다.

`::part` 내장 지원

플러그인이 shortcuts를 통해 지원하고 preset-mini의 part-[<part-name>]:<rule|shortcut> 규칙을 사용하므로 ::part를 사용할 수 있습니다. 예를 들어 part-[<part-name>]:bg-green-500과 같은 간단한 규칙이나 일부 shortcut과 함께 사용할 수 있습니다: 아래 링크된 예제 프로젝트의 src/my-element.ts를 확인하세요.

part-[<part-name>]:<rule|shortcut>는 이 플러그인이 shadow-dom 모드를 사용할 때만 작동합니다.

플러그인은 같은 웹 컴포넌트의 여러 부분과 다른 웹 컴포넌트의 같은 부분 간의 충돌을 피하기 위해 nth-of-type을 사용합니다. 걱정할 필요가 없으며 플러그인이 처리해줍니다.

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' },
      ],
      /* more options */
    }),
  ],
}

그런 다음 웹 컴포넌트에서:

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

UnoCSS 플러그인 다음에 vite-plugin-solid 플러그인을 추가해야 합니다.

import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

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

Elm

UnoCSS 플러그인보다 먼저 vite-plugin-elm 플러그인을 추가해야 합니다.

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

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

레거시

renderModernChunks: false와 함께 @vitejs/plugin-legacy를 사용하는 경우 unocss 옵션에 추가해야 합니다

import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
import { presetWind3 } from 'unocss'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [presetWind3()],
      legacy: {
        renderModernChunks: false,
      },
    }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      renderModernChunks: false,
    }),
  ],
})

Vite Plugin ​

설치 ​

모드 ​

global (기본값) ​

vue-scoped ​

svelte-scoped ​

shadow-dom ​

per-module (실험적) ​

dist-chunk (실험적) ​

DevTools에서 클래스 편집 ​

프레임워크 ​

VanillaJS / TypeScript ​

React ​

Preact ​

Svelte ​

Sveltekit ​

Web Components ​

::part 내장 지원 ​

Solid ​

Elm ​

레거시 ​

라이선스 ​

Vite Plugin

설치

모드

`global` (기본값)

`vue-scoped`

`svelte-scoped`

`shadow-dom`

`per-module` (실험적)

`dist-chunk` (실험적)

DevTools에서 클래스 편집

프레임워크

VanillaJS / TypeScript

React

Preact

Svelte

Sveltekit

Web Components

`::part` 내장 지원

Solid

Elm

레거시

라이선스