React SSR配置报错：缺少处理.css文件的loader求助

问题根源 #

服务端webpack配置（webpack.server.config.js）未配置处理.css文件的loader规则。客户端配置中虽有对应规则，但服务端打包时加载src/styles/App.css时，没有匹配的loader处理，导致解析失败。

修复步骤 #

1. 服务端配置添加CSS处理规则 #

在webpack.server.config.js的module.rules数组中，新增处理.css文件的规则：

let config = {
  // ...其他已有配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "css-loader",
            options: {
              modules: {
                exportOnlyLocals: true,
                exportLocalsConvention: "camelCase",
                localIdentName: "[local]_[hash:base64:5]",
              },
            },
          },
        ],
      },
      // 新增CSS处理规则
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              modules: {
                exportOnlyLocals: true, // 服务端仅导出类名，不生成CSS内容
              },
            },
          },
        ],
      },
    ],
  },
};

2. 共享配置添加CSS扩展名支持 #

修改webpack.shared.config.js的resolve.extensions，添加.css，确保webpack能自动解析CSS文件：

module.exports = {
  // ...其他已有配置
  resolve: {
    extensions: [".js", ".less", ".css"],
  },
};

说明 #

服务端渲染场景下，我们不需要将CSS打包成独立文件或注入DOM，只需要让webpack识别CSS模块并导出类名，保证React组件中导入的CSS模块能正常获取类名即可，因此使用exportOnlyLocals选项避免生成不必要的CSS内容。

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