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
  1. 使用 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'));
      }
    },
  },
};