close
指南
配置
插件
API
社区
指南
配置
插件
API
社区
简体中文

使用 UnoCSS

UnoCSS 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。

你可以通过 @unocss/webpack 插件来在 Rsbuild 中接入 UnoCSS。

安装 UnoCSS

首先，你需要安装 @unocss/webpack。

npm
yarn
pnpm
bun
npm add @unocss/webpack -D

配置插件

在 tools.rspack 中注册 UnoCSS 的插件：

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          // options
        }),
      ],
    },
  },
});

通过 UnoCSSRspackPlugin 的选项可以添加 UnoCSS 的 Presets，例如：

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
import { presetAttributify } from '@unocss/preset-attributify';
import { presetUno } from '@unocss/preset-uno';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          presets: [presetUno(), presetAttributify()],
        }),
      ],
    },
  },
});
TIP

上述配置仅供参考，你可以根据项目需要进行调整。

引入 CSS

在 JavaScript 入口文件中引用 uno.css：

main.js
import 'uno.css';

完成

你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤！

你可以在任意组件或 HTML 中使用 UnoCSS 的 utility classes，比如：

<h1 class="px-2 items-center justify-between">Hello world!</h1>

更多用法请参考 UnoCSS 文档。

VS Code 插件

UnoCSS 提供了 VS Code 插件，用于在 VS Code 中提示 UnoCSS 的 utilities classes。

你可以在 VS Code 中安装该插件，即可开启更多智能化功能。