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#

It is recommended to only enable the injectStyles option in development mode.

For production builds, it is recommended to use the default behavior of Rsbuild, which extracts CSS into separate bundles to allow browsers to load CSS and JS assets in parallel.

For example:

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