使用 UnoCSS
UnoCSS 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。
你可以通过 @unocss/webpack 插件来在 Rsbuild 中接入 UnoCSS。
安装 UnoCSS
首先，你需要安装 @unocss/webpack。
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()], }), ], }, }, });
引入 CSS
在 JavaScript 入口文件中引用 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 中安装该插件，即可开启更多智能化功能。
