diff --git a/scripts/dictionary.txt b/scripts/dictionary.txt
index 2e15be96dc..96d9dc3a81 100644
--- a/scripts/dictionary.txt
+++ b/scripts/dictionary.txt
@@ -4,6 +4,7 @@ antd
apng
applescript
atrules
+attributify
biomejs
brotli
browserslistrc
diff --git a/website/docs/en/guide/basic/unocss.mdx b/website/docs/en/guide/basic/unocss.mdx
index 62a9c0473e..1a09a951cb 100644
--- a/website/docs/en/guide/basic/unocss.mdx
+++ b/website/docs/en/guide/basic/unocss.mdx
@@ -2,42 +2,57 @@
[UnoCSS](https://unocss.dev/) is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.
-You can integrate UnoCSS in Rsbuild via PostCSS plugins.
+You can integrate UnoCSS in Rsbuild via [@unocss/webpack](https://www.npmjs.com/package/@unocss/webpack).
## Installing UnoCSS
-You need to install `unocss` and `@unocss/postcss` first.
+You need to install `@unocss/webpack` first.
import { PackageManagerTabs } from '@theme';
-
+
-## Configuring PostCSS
+## Configuring Plugin
-You can register the `unocss` PostCSS plugin through [postcss.config.mjs](https://www.npmjs.com/package/postcss-loader#config) or [tools.postcss](/config/tools/postcss).
+Register the `UnoCSSRspackPlugin` plugin in [tools.rspack](/config/tools/rspack):
-```js title="postcss.config.mjs"
-import UnoCSS from '@unocss/postcss';
+```js title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
-export default {
- plugins: [UnoCSS()],
-};
+export default defineConfig({
+ tools: {
+ rspack: {
+ plugins: [
+ UnoCSSRspackPlugin({
+ // options
+ }),
+ ],
+ },
+ },
+});
```
-Rsbuild has integrated [autoprefixer](https://github.com/postcss/autoprefixer), so you only need to register the `UnoCSS` plugin.
+You can add UnoCSS Presets via the options of `UnoCSSRspackPlugin`, for example:
-## Configuring UnoCSS
-
-Create a `uno.config.ts` file in the root directory of your project and add the following content:
-
-```js title="uno.config.ts"
-import { defineConfig, presetUno } from 'unocss';
+```js title="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({
- content: {
- filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+ plugins: [pluginReact()],
+ tools: {
+ rspack: {
+ plugins: [
+ UnoCSSRspackPlugin({
+ presets: [presetUno(), presetAttributify()],
+ }),
+ ],
+ },
},
- presets: [presetUno()],
});
```
@@ -47,15 +62,12 @@ The above configuration is for reference only and can be modified to suit the ne
## Importing CSS
-Add the `@unocss` directives in your CSS entry file:
+In the JavaScript entry file, import `uno.css`:
-```css title="main.css"
-@unocss preflights;
-@unocss default;
+```js title="main.js"
+import 'uno.css';
```
-Depending on your needs, you can selectively import the CSS styles provided by UnoCSS. Please refer to the [unocss documentation](https://unocss.dev/integrations/postcss#usage) for detailed usage of the UnoCSS.
-
## Done
You have now completed all the steps to integrate UnoCSS in Rsbuild!
diff --git a/website/docs/zh/guide/basic/unocss.mdx b/website/docs/zh/guide/basic/unocss.mdx
index 4749b71b42..2210a5e2f2 100644
--- a/website/docs/zh/guide/basic/unocss.mdx
+++ b/website/docs/zh/guide/basic/unocss.mdx
@@ -2,40 +2,57 @@
[UnoCSS](https://unocss.dev/) 是一个灵活可扩展的原子化的 CSS 引擎，所有 CSS 工具类都是通过 preset 提供的。
-你可以通过 PostCSS 插件来在 Rsbuild 中接入 UnoCSS。
+你可以通过 [@unocss/webpack](https://www.npmjs.com/package/@unocss/webpack) 插件来在 Rsbuild 中接入 UnoCSS。
## 安装 UnoCSS
-首先，你需要安装 `unocss` 和 `@unocss/postcss`。
+首先，你需要安装 `@unocss/webpack`。
import { PackageManagerTabs } from '@theme';
-
+
-## 配置 PostCSS
+## 配置插件
-你可以通过 [postcss.config.mjs](https://www.npmjs.com/package/postcss-loader#config) 或 [tools.postcss](/config/tools/postcss) 来注册 `unocss` 的 PostCSS 插件。
+在 [tools.rspack](/config/tools/rspack) 中注册 UnoCSS 的插件：
-```js title="postcss.config.mjs"
-import UnoCSS from '@unocss/postcss';
+```js title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/core';
+import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
-export default {
- plugins: [UnoCSS()],
-};
+export default defineConfig({
+ tools: {
+ rspack: {
+ plugins: [
+ UnoCSSRspackPlugin({
+ // options
+ }),
+ ],
+ },
+ },
+});
```
-## 配置 UnoCSS
+通过 `UnoCSSRspackPlugin` 的选项可以添加 UnoCSS 的 Presets，例如：
-在当前项目的根目录创建 `uno.config.ts` 文件，并添加以下内容：
-
-```js title="uno.config.ts"
-import { defineConfig, presetUno } from 'unocss';
+```js title="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({
- content: {
- filesystem: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+ plugins: [pluginReact()],
+ tools: {
+ rspack: {
+ plugins: [
+ UnoCSSRspackPlugin({
+ presets: [presetUno(), presetAttributify()],
+ }),
+ ],
+ },
},
- presets: [presetUno()],
});
```
@@ -45,15 +62,12 @@ export default defineConfig({
## 引入 CSS
-在 CSS 入口文件中添加 `@unocss` 指令：
+在 JavaScript 入口文件中引用 `uno.css`：
-```css title="main.css"
-@unocss preflights;
-@unocss default;
+```js title="main.js"
+import 'uno.css';
```
-根据需求不同，你可以选择性地导入 UnoCSS 提供的 CSS 样式。请参考 [UnoCSS 文档](https://unocss.dev/integrations/postcss#usage) 来了解 `@unocss` 指令的详细用法。
-
## 完成
你已经完成了在 Rsbuild 中接入 UnoCSS 的全部步骤！