> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt. # output.inlineStyles - **类型：** ```ts type InlineChunkTestFunction = (params: { size: number; name: string; }) => boolean; type InlineChunkTest = RegExp | InlineChunkTestFunction; type InlineChunkConfig = | boolean | InlineChunkTest | { enable?: boolean | 'auto'; test: InlineChunkTest }; ``` - **默认值：** `false` 用来控制是否用 ` ``` :::tip 设置 `inlineStyles: true`，等价于将 [inlineStyles.enable](#enable) 设置为 `'auto'`，这表示仅在生产模式时开启内联。 ::: ### 通过正则匹配当你需要内联产物中的一部分 CSS 文件时，你可以将 `inlineStyles` 设置为一个正则表达式，匹配需要内联的 CSS 文件的 URL。比如，将产物中的 `main.css` 内联到 HTML 中，你可以添加如下配置： ```ts title="rsbuild.config.ts" export default { output: { inlineStyles: /[\\/]main\.\w+\.css$/, }, }; ``` :::tip 生产模式的文件名中默认包含了一个 hash 值，比如 `static/css/main.18a568e5ab.css`。因此，在正则表达式中需要通过 `\w+` 来匹配 hash。 ::: ### 通过函数匹配你也可以将 `output.inlineStyles` 设置为一个函数，函数接收以下参数： - `name`：文件名，比如 `static/css/main.18a568e5ab.css`。 - `size`：文件大小，单位为 byte。比如，我们希望内联小于 10kB 的资源，可以添加如下配置： ```ts title="rsbuild.config.ts" export default { output: { inlineStyles({ size }) { return size < 10 * 1000; }, }, }; ``` ## 选项 ### enable - **类型：** `'auto' | boolean` - **默认值：** `false` 是否启用内联。`'auto'` 表示在生产模式时开启，开发模式时关闭。 ```ts title="rsbuild.config.ts" export default { output: { inlineStyles: { enable: 'auto', test: /[\\/]main\.\w+\.css$/, }, }, }; ``` ### test - **类型：** `RegExp | ((params: { size: number; name: string }) => boolean)` 用来匹配需要内联的 CSS 文件。 ```ts title="rsbuild.config.ts" export default { output: { inlineStyles: { enable: true, test: /[\\/]main\.\w+\.css$/, }, }, }; ```