Rollup 和 Rolldown 插件

🌐 Rollup and Rolldown Plugin

在不使用 Vite 的情况下，将 UnoCSS 与 Rollup 或 Rolldown 一起使用。这个插件支持 global 模式，并且当你从入口模块导入 uno.css 时会生成一个 CSS 资源。

🌐 Use UnoCSS with Rollup or Rolldown without Vite. The plugin supports the global mode and emits a CSS asset when you import uno.css from an entry module.

安装

🌐 Installation

pnpm

pnpm add -D unocss rollup

yarn

yarn add -D unocss rollup

npm

npm install -D unocss rollup

bun

bun add -D unocss rollup

使用 Rolldown 时，把 rollup 换成 rolldown。

🌐 Replace rollup with rolldown when you use Rolldown.

Rollup

rollup.config.ts

import UnoCSS from 'unocss/rollup'

export default {
  input: 'src/main.ts',
  plugins: [
    UnoCSS(),
  ],
}

滚动

🌐 Rolldown

rolldown.config.ts

import UnoCSS from 'unocss/rolldown'

export default {
  input: 'src/main.ts',
  plugins: [
    UnoCSS(),
  ],
}

从入口模块导入 uno.css：

🌐 Import uno.css from an entry module:

src/main.ts

import 'uno.css'

这个插件会把生成的 CSS 作为输出资源。把这个资源通过你的部署或者 HTML 流程加入到你的应用里。

🌐 The plugin emits generated CSS as an output asset. Include that asset in your application with your deployment or HTML pipeline.

配置

🌐 Configuration

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

🌐 Create a uno.config.ts file:

uno.config.ts

import { defineConfig } from 'unocss'

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

你也可以直接把配置传给插件：

🌐 You can also pass the configuration to the plugin directly:

import UnoCSS from 'unocss/rollup'

UnoCSS({
  // ...UnoCSS options
})