close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页output.inlineScripts
下一页output.legalComments

#output.inlineStyles

  • 类型:
type InlineChunkTestFunction = (params: {
  size: number;
  name: string;
}) => boolean;

type InlineChunkTest = RegExp | InlineChunkTestFunction;

type InlineChunkConfig =
  | boolean
  | InlineChunkTest
  | { enable?: boolean | 'auto'; test: InlineChunkTest };
  • 默认值: false

用来控制是否用 <style> 标签将产物中的 style 文件(.css 文件)inline 到 HTML 中。

注意,如果开启了这个选项,那么 style 文件将不会被写入产物目录中,而只会以 inline 样式的形式存在于 HTML 文件中。

#示例

默认情况下,我们有这样的产物文件:

dist/html/main/index.html
dist/static/css/style.css
dist/static/js/main.js

开启 output.inlineStyles 选项后:

export default {
  output: {
    inlineStyles: true,
  },
};

生产构建的产物文件将变成:

dist/html/main/index.html
dist/static/js/main.js

同时,dist/static/css/style.css 文件将被 inline 到 index.html 中:

<html>
  <head>
    <style>
      /* content of dist/static/css/style.css */
    </style>
  </head>
  <body></body>
</html>
TIP

设置 inlineStyles: true,等价于将 inlineStyles.enable 设置为 'auto',这表示仅在生产模式时开启内联。

#通过正则匹配

当你需要内联产物中的一部分 CSS 文件时,你可以将 inlineStyles 设置为一个正则表达式,匹配需要内联的 CSS 文件的 URL。

比如,将产物中的 main.css 内联到 HTML 中,你可以添加如下配置:

export default {
  output: {
    inlineStyles: /[\\/]main\.\w+\.css$/,
  },
};
TIP

生产模式的文件名中默认包含了一个 hash 值,比如 static/css/main.18a568e5.css。因此,在正则表达式中需要通过 \w+ 来匹配 hash。

#通过函数匹配

你也可以将 output.inlineStyles 设置为一个函数,函数接收以下参数:

  • name:文件名,比如 static/css/main.18a568e5.css。
  • size:文件大小,单位为 byte。

比如,我们希望内联小于 10kB 的资源,可以添加如下配置:

export default {
  output: {
    inlineStyles({ size }) {
      return size < 10 * 1000;
    },
  },
};

#选项

#enable

  • 类型: 'auto' | boolean
  • 默认值: false

是否启用内联。'auto' 表示在生产模式时开启,开发模式时关闭。

export default {
  output: {
    inlineStyles: {
      enable: 'auto',
      test: /[\\/]main\.\w+\.css$/,
    },
  },
};

#test

  • 类型: RegExp | ((params: { size: number; name: string }) => boolean)

用来匹配需要内联的 CSS 文件。

export default {
  output: {
    inlineStyles: {
      enable: true,
      test: /[\\/]main\.\w+\.css$/,
    },
  },
};