如何在Express/Nest服务端提取React组件中module.css的CSS代码？

当然可以实现服务端提取使用module.css的React组件样式，针对你用Express/Nest做服务端、为Puppeteer生成PDF模板的场景，推荐以下两种实用方案：

方案一：Webpack打包提取独立CSS文件 #

这是最直接的方式，通过Webpack的CSS提取插件，在服务端构建阶段把所有用到的CSS Module打包成独立的CSS文件，之后在生成PDF的HTML模板中引入该文件即可。

关键配置步骤 #

1. 安装依赖：

npm install mini-css-extract-plugin css-loader --save-dev

2. 配置服务端Webpack（以Nest.js为例，可在webpack.config.js中添加）：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  target: 'node',
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'pdf-styles.[contenthash].css',
    }),
  ],
};

3. 服务端生成PDF模板时，在HTML头部插入CSS文件链接：

<head>
  <link rel="stylesheet" href="/static/pdf-styles.xxx.css">
</head>

Puppeteer加载该HTML时会自动加载对应CSS，完成PDF样式渲染。

方案二：服务端渲染时内联CSS样式 #

如果不需要独立的CSS文件，也可以在服务端渲染React组件的过程中，收集当前组件用到的CSS Module样式，直接内联到HTML的<style>标签中，避免额外的文件请求。

实现思路 #

• 借助css-loader的exportOnlyLocals: false配置，让CSS模块导出样式内容而非仅类名。
• 在服务端渲染组件前，提前加载并收集所有用到的CSS模块的样式代码。
• 将收集到的样式内联到HTML的<head>中：

<head>
  <style>
    /* 这里插入收集到的CSS代码 */
  </style>
</head>

适配Nest/Express注意事项 #

• Nest.js可通过自定义Webpack配置集成上述打包流程，或使用@nestjs/serve-static插件托管生成的CSS文件。
• Express则可直接将Webpack构建后的CSS文件放在静态资源目录，通过express.static中间件提供访问。

内容的提问来源于stack exchange，提问作者DevOverflow