diff --git a/website/docs/en/guide/basic/css-usage.mdx b/website/docs/en/guide/basic/css-usage.mdx index d72c6e0013..3121744eaf 100644 --- a/website/docs/en/guide/basic/css-usage.mdx +++ b/website/docs/en/guide/basic/css-usage.mdx @@ -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 diff --git a/website/docs/zh/guide/basic/css-usage.mdx b/website/docs/zh/guide/basic/css-usage.mdx index 5e5be3e846..f195832e8c 100644 --- a/website/docs/zh/guide/basic/css-usage.mdx +++ b/website/docs/zh/guide/basic/css-usage.mdx @@ -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 文件