UnoCSS中文官网

Appearance

Vite插件 ​

Vite 插件 unocss包.

安装 ​

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

安装插件:

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

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

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

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

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

添加 virtual:uno.css 到main入口:

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

模式 ​

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

global (默认) ​

这是插件的默认模式：在这种模式下，您需要在入口点添加 uno.css的导入。

此模式为build和dev启用了一组Vite插件，并支持HMR。

生成的css将是在index.html上注入的全局样式表。

vue-scoped ​

此模式将生成的CSS注入Vue SFCs<style scoped>以进行隔离。

svelte-scoped ​

svelte-scoped mode has been moved to its own package, see @unocss/svelte-scoped/vite.

shadow-dom ​

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

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

per-module (experimental) ​

此模式将为每个模块生成一个CSS表，可以确定范围。

dist-chunk (experimental) ​

这种模式将为构建时的每个代码块生成一个CSS表，非常适合MPA。

在DevTools中编辑类 ​

因为“按需”的限制，DevTools不知道那些你还没有在源代码中使用过的东西。因此，如果你想通过直接更改DevTools中的类来尝试如何工作，只需在主条目中添加以下行即可。

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

WARNING

Please use it with caution, under the hood we use MutationObserver to detect the class changes. Which means not only your manual changes but also the changes made by your scripts will be detected and included in the stylesheet. This could cause some misalignment between dev and the production build when you add dynamic classes based on some logic in script tags. We recommended adding your dynamic parts to the safelist or setup UI regression tests for your production build if possible.

框架 ​

一些UI/App框架有一些必须解决的注意事项，如果您使用以下框架之一，请应用这些建议。

VanillaJS / TypeScript ​

When using VanillaJS or TypeScript, you need to add js and ts files extensions to allow UnoCSS read and parse the content, by default js and ts files are excluded, check out the Extracting from Build Tools Pipeline section.

React ​

If you're using @vitejs/plugin-react:

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

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

If you're using @unocss/preset-attributify you should remove tsc from the build script.

If you are using @vitejs/plugin-react with @unocss/preset-attributify, you must add the plugin before @vitejs/plugin-react.

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

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

You have a React example project on examples/vite-react directory using both plugins, check the scripts on package.json and its Vite configuration file.

Preact ​

If you're using @preact/preset-vite:

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

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

or if you're using @prefresh/vite:

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

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

If you're using @unocss/preset-attributify you should remove tsc from the build script.

You have a Preact example project on examples/vite-preact directory using both plugins, check the scripts on package.json and its Vite configuration file.

Svelte ​

You must add the plugin before @sveltejs/vite-plugin-svelte.

To support class:foo and class:foo={bar} add the plugin and configure extractorSvelte on extractors option.

You can use simple rules with class:, for example class:bg-red-500={foo} or using shortcuts to include multiples rules, see src/App.svelte on linked example project below.

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

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

Sveltekit ​

To support class:foo and class:foo={bar} add the plugin and configure extractorSvelte on extractors option.

You can use simple rules with class:, for example class:bg-red-500={foo} or using shortcuts to include multiples rules, see src/routes/+layout.svelte on linked example project below.

ts
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import UnoCSS from 'unocss/vite'
import extractorSvelte from '@unocss/extractor-svelte'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    sveltekit(),
  ],
}

Web Components ​

To work with web components you need to enable shadow-dom mode on the plugin.

Don't forget to remove the import for uno.css since the shadow-dom mode will not expose it and the application will not work.

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

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

On each web component just add @unocss-placeholder to its style CSS block:

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

If you're using Lit:

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

You have a Web Components example project on examples/vite-lit directory.

::part built-in support ​

You can use ::part since the plugin supports it via shortcuts and using part-[<part-name>]:<rule|shortcut> rule from preset-mini, for example using it with simple rules like part-[<part-name>]:bg-green-500 or using some shortcut: check src/my-element.ts on linked example project below.

The part-[<part-name>]:<rule|shortcut> will work only with this plugin using the shadow-dom mode.

The plugin uses nth-of-type to avoid collisions with multiple parts in the same web component and for the same parts on distinct web components, you don't need to worry about it, the plugin will take care for you.

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

then in your web components:

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 ​

You need to add the vite-plugin-solid plugin after UnoCSS's plugin.

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

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

Elm ​

You need to add the vite-plugin-elm plugin before UnoCSS's plugin.

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

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

License ​

Released under the MIT License.

Copyright © 2021-PRESENT Anthony Fu, Unocss中文由 www.unocss.com.cn翻译