UnoCSS 中文网

Appearance

Vite 插件 ​

Vite 插件随 unocss 包一起提供。

安装 ​

bash
pnpm add -D unocss
bash
yarn add -D unocss
bash
npm install -D unocss
bash
bun add -D unocss

安装插件：

vite.config.ts
ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

创建一个 uno.config.ts 文件：

uno.config.ts
ts
import { defineConfig } from 'unocss'

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

将 virtual:uno.css 添加到你的主入口文件中：

main.ts
ts
import 'virtual:uno.css'

模式 ​

Vite 插件提供了一组模式，可实现不同的行为。

global（默认） ​

这是插件的默认模式：在此模式下，你需要在入口文件中导入 uno.css。

此模式会启用一组用于 构建 和支持 HMR 的 开发 环境的 Vite 插件。

生成的 css 将是一个全局样式表，会注入到 index.html 中。

vue-scoped ​

此模式会将生成的 CSS 注入到 Vue 单文件组件（SFC）的 <style scoped> 中，以实现隔离。

svelte-scoped ​

svelte-scoped 模式已移至单独的包中，请参阅 @unocss/svelte-scoped/vite。

shadow-dom ​

由于 Web 组件 使用 Shadow DOM，因此无法直接通过全局样式表对内容进行样式设置（除非使用 CSS 自定义属性，这些属性会穿透 Shadow DOM），你需要将插件生成的 CSS 内联到 Shadow DOM 样式中。

要内联生成的 CSS，你只需将插件模式配置为 shadow-dom，并在每个 Web 组件样式的 CSS 块中包含 @unocss-placeholder 魔法占位符。如果你在 Vue SFC 中定义 Web 组件，并且想在 UnoCSS 旁边定义自定义样式，可以将占位符包裹在 CSS 注释中，以避免 IDE 出现语法错误。

per-module（实验性） ​

此模式会为每个模块生成一个 CSS 样式表，可以是作用域化的。

dist-chunk（实验性） ​

此模式会在构建时为每个代码块生成一个 CSS 样式表，非常适合多页面应用（MPA）。

在开发者工具中编辑类名 ​

由于 “按需” 模式的限制，开发者工具无法识别你在源代码中尚未使用的类名。因此，如果你想通过直接在开发者工具中更改类名来尝试某些功能，只需在主入口文件中添加以下代码行。

vite.config.ts
ts
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 之前添加该插件。

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

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

你在 examples/vite-react 目录下有一个使用了这两个插件的 React 示例项目，请查看 package.json 中的脚本及其 Vite 配置文件。

Preact ​

如果你正在使用 @preact/preset-vite：

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

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

或者，如果你正在使用 @prefresh/vite：

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

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

如果你正在使用 @unocss/preset-attributify，则应从 build 脚本中移除 tsc。

你可以在 examples/vite-preact 目录下找到一个同时使用了这两个插件的 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。

vite.config.ts
ts
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。

vite.config.ts
ts
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 组件 ​

要使用 Web 组件，你需要在插件上启用 shadow-dom 模式。

不要忘记移除 uno.css 的导入，因为 shadow-dom 模式不会暴露该文件，不移除的话应用程序将无法正常工作。

vite.config.ts
ts
import UnoCSS from 'unocss/vite'

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

在每个 Web 组件 的样式 CSS 块中添加 @unocss-placeholder：

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

如果你正在使用 Lit：

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

你可以在 examples/vite-lit 目录下找到一个 Web Components 示例项目。

::part 内置支持 ​

你可以使用 ::part，因为该插件通过 shortcuts 支持它，并且可以使用 preset-mini 中的 part-[<部件名称>]:<规则|快捷方式> 规则。例如，使用像 part-[<部件名称>]:bg-green-500 这样的简单规则，或者使用一些 快捷方式：查看下面链接的示例项目中的 src/my-element.ts。

part-[<部件名称>]:<规则|快捷方式> 仅在该插件使用 shadow-dom 模式时有效。

该插件使用 nth-of-type 来避免同一 Web 组件中的多个部件以及不同 Web 组件中的相同部件发生冲突，你无需担心这个问题，插件会为你处理。

vite.config.ts
ts
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 */
    }),
  ],
}

然后在你的 Web 组件中：

ts
// 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>
`
ts
// 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 插件。

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

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

Elm ​

你需要在 UnoCSS 插件之前添加 vite-plugin-elm 插件。

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

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

旧版支持 ​

如果使用 @vitejs/plugin-legacy 并设置 renderModernChunks: false，你需要将其添加到 unocss 选项中

ts
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,
    }),
  ],
})

许可证 ​