docs: add how to import absolute path in CSS files (#3816)

Co-authored-by: neverland <[email protected]>

Author: Timeless0911

website/docs/en/guide/basic/static-assets.mdx

@@ -66,6 +66,34 @@ Import with [alias](/guide/advanced/alias) are also supported:
 }
 ```
 
+If you want to reference static assets in absolute paths in CSS files:
+
+```css
+@font-face {
+  font-family: DingTalk;
+  src: url('/image/font/foo.ttf');
+}
+```
+
+By default, the built-in `css-loader` in Rsbuild will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) to filter out the specified paths. The filtered paths are left as they are in the code.
+
+```ts
+export default {
+  tools: {
+    cssLoader: {
+      url: {
+        filter: (url) => {
+          if (/\/image\/font/.test(url)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+};
+```
+
 ## Import Results
 
 The result of importing static assets depends on the file size:

website/docs/zh/guide/basic/static-assets.mdx

@@ -66,6 +66,34 @@ export default = () => <img src={logo} />;
 }
 ```
 
+如果需要在 CSS 文件中引用绝对路径下的静态资源：
+
+```css
+@font-face {
+  font-family: DingTalk;
+  src: url('/image/font/foo.ttf');
+}
+```
+
+默认情况下，Rsbuild 内置的 `css-loader` 会解析 `url()` 中的绝对路径并寻找指定的模块。如果你希望跳过绝对路径的解析，可以配置 [`tools.cssLoader`](/config/tools/css-loader#toolscssloader) 来过滤指定的路径，被过滤的路径将被原样保留在代码中。
+
+```ts
+export default {
+  tools: {
+    cssLoader: {
+      url: {
+        filter: (url) => {
+          if (/\/image\/font/.test(url)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+};
+```
+
 ## 引用结果
 
 引用静态资源的结果取决于文件体积：