Skip to content

docs: update UnoCSS guide to use @unocss/webpack #4287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenjiahan merged 2 commits into from
Dec 28, 2024
Merged

docs: update UnoCSS guide to use @unocss/webpack #4287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d87114
docs: update UnoCSS guide to use `@unocss/webpack`
chenjiahan Dec 28, 2024
901c4fe
fix
chenjiahan Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/dictionary.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ antd
apng
applescript
atrules
attributify
biomejs
brotli
browserslistrc
Expand Down
64 changes: 38 additions & 26 deletions website/docs/en/guide/basic/unocss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<PackageManagerTabs command="add unocss @unocss/postcss -D" />
<PackageManagerTabs command="add @unocss/webpack -D" />

## 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()],
});
```

Expand All @@ -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!
Expand Down
62 changes: 38 additions & 24 deletions website/docs/zh/guide/basic/unocss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<PackageManagerTabs command="add unocss @unocss/postcss -D" />
<PackageManagerTabs command="add @unocss/webpack -D" />

## 配置 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()],
});
```

Expand All @@ -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 的全部步骤！
Expand Down
Loading