基于React的Excel加载项项目是否支持CSS Modules？

Yeoman Office生成的React项目默认支持CSS Modules，你当前依赖包没有缺失，样式不生效的核心原因是webpack配置中未开启对.module.css后缀文件的模块化识别，按以下步骤调整即可：

• 打开项目根目录下的webpack.config.js配置文件，找到原有的处理.css后缀文件的规则项
• 将原有单条css处理规则拆分为两条，分别适配普通全局css和模块化css，参考配置如下：

module.exports = {
  // 其他原有配置保留不变
  module: {
    rules: [
      // 其他原有loader规则保留不变
      // 处理普通全局css文件
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      // 处理模块化css文件
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 自定义生成的类名格式，可根据需求调整
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }
          },
          'postcss-loader'
        ]
      }
    ]
  }
}

• 若项目中使用extract-text-webpack-plugin提取css到独立文件，需同步调整该插件对应的css处理规则，保持modules参数配置一致
• 保存配置后重启webpack开发服务，或重新执行打包命令，样式即可正常生效

可优先排查Header.module.css文件中.header-main类名是否存在拼写错误，排除代码书写问题。

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