UnoCSS 是一个灵活可扩展的原子化的 CSS 引擎,所有 CSS 工具类都是通过 preset 提供的。
你可以通过 PostCSS 插件来在 Rsbuild 中接入 UnoCSS。
首先,你需要安装 unocss
和 @unocss/postcss
。
你可以通过 postcss.config.cjs 或 tools.postcss 来注册 unocss
的 PostCSS 插件。
在当前项目的根目录创建 uno.config.ts
文件,并添加以下内容:
上述配置仅供参考,你可以根据项目需要进行调整。
在 CSS 入口文件中添加 @unocss
指令:
根据需求不同,你可以选择性地导入 UnoCSS 提供的 CSS 样式。请参考 UnoCSS 文档 来了解 @unocss
指令的详细用法。
你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤!
你可以在任意组件或 HTML 中使用 UnoCSS 的 utility classes,比如:
更多用法请参考 UnoCSS 文档。
UnoCSS 提供了 VSCode 插件,用于在 VS Code 中提示 UnoCSS 的 utilities classes。
你可以在 VS Code 中安装该插件,即可开启更多智能化功能。