Skip to content
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
16 changes: 16 additions & 0 deletions website/docs/en/guide/basic/css-usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,19 @@ In Sass and Less files, it is also allowed to add the `~` prefix to resolve styl
```scss title="src/index.scss"
@import 'normalize.css';
```

## Import raw CSS

Rsbuild supports importing raw CSS files as strings in JavaScript by using the `?raw` query parameter.

```ts title="src/index.js"
import rawCss from './style.css?raw';

console.log(rawCss); // Output the raw content of the CSS file
```

Using `import "*.css?raw"` has the following behaviors:

- Get the raw text content of the CSS file, without any preprocessing or compilation
- The content of the CSS file will be inlined into the final JavaScript bundle
- No separate CSS file will be generated
16 changes: 16 additions & 0 deletions website/docs/zh/guide/basic/css-usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,19 @@ body {
```scss title="src/index.scss"
@import '~normalize.css';
```

## 引用原始 CSS 文件

Rsbuild 支持通过 `?raw` 查询参数引用原始 CSS 文件,并将其作为字符串导入到 JavaScript 中。

```ts title="src/index.js"
import rawCss from './style.css?raw';

console.log(rawCss); // 输出 CSS 文件的原始内容
```

使用 `import "*.css?raw"` 的行为如下:

- 获取 CSS 文件的原始文本内容,不经过任何预处理或编译
- 内容会作为字符串内联到最终的 JavaScript 包中
- 不会生成单独的 CSS 文件
Loading