#output.injectStyles

• Type: boolean
• Default: false

Whether to inject styles into DOM.

By default, Rsbuild will extract CSS into a separate .css file and output it to the dist directory. When this option is set to true, CSS files will be inlined into JS files and inserted on the page at runtime via <style> tags. This feature is implemented based on style-loader.

#Example

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

#Configure style-loader

When output.injectStyles is enabled, you can modify the options of style-loader through tools.styleLoader.

#Usage scenario

We recommend enabling the injectStyles option only in development.

For production builds, we recommend using Rsbuild's default behavior, which extracts CSS into separate bundles so browsers can load CSS and JS assets in parallel.

For example:

export default {
  output: {
    injectStyles: process.env.NODE_ENV === 'development',
  },
};