Skip to content
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.

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

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

Merged
merged 3 commits into from
Oct 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
28 changes: 28 additions & 0 deletions website/docs/en/guide/basic/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
28 changes: 28 additions & 0 deletions website/docs/zh/guide/basic/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
},
},
},
};
```

## 引用结果

引用静态资源的结果取决于文件体积:
Expand Down
Loading