output.injectStyles#

• 类型： boolean
• 默认值： false

是否将 CSS 样式插入到 DOM 中。

默认情况下，Rsbuild 会把 CSS 提取为独立的 .css 文件，并输出到构建产物目录。设置该选项为 true 后，CSS 文件会被内联到 JS 文件中，并在运行时通过 <style> 标签插入到页面上。该功能基于 style-loader 实现。

示例#

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

配置 style-loader#

在开启 output.injectStyles 时，你可以通过 tools.styleLoader 来修改 style-loader 的选项。

使用场景#

建议仅在开发环境开启 injectStyles 选项。

对于生产环境构建，建议使用 Rsbuild 的默认行为，将 CSS 抽取为单独的 bundle，以便浏览器能够并行加载 CSS 和 JS 资源。

比如：

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

如果你需要在生产环境下开启该选项，请留意内联的 CSS 代码不会经过 Rsbuild 默认的 CSS 压缩器，你可以手动注册 PostCSS 的 cssnano 插件来对内联代码进行压缩。

1. 安装 cssnano：

npm add cssnano -D

2. 使用 tools.postcss 注册 cssnano：

export default {
  tools: {
    postcss: (opts) => {
      // apply cssnano in production build
      if (process.env.NODE_ENV === 'production') {
        opts.postcssOptions?.plugins?.push(require('cssnano'));
      }
    },
  },
};