diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx index 05b0e28b9d..05d0fddbf2 100644 --- a/website/docs/en/guide/basic/static-assets.mdx +++ b/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: diff --git a/website/docs/zh/guide/basic/static-assets.mdx b/website/docs/zh/guide/basic/static-assets.mdx index c14d3d5961..324e0822b2 100644 --- a/website/docs/zh/guide/basic/static-assets.mdx +++ b/website/docs/zh/guide/basic/static-assets.mdx @@ -66,6 +66,34 @@ export default = () => ; } ``` +如果需要在 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; + }, + }, + }, + }, +}; +``` + ## 引用结果 引用静态资源的结果取决于文件体积: