React v15应用部署GitHub Pages出现CSS module未定义问题求助

嘿，我仔细看了你的测试仓库，结合你说的本地跑起来完全正常，但部署到GitHub Pages就出CSS Module undefined、页面空的情况，大概率是生产环境webpack配置和GitHub Pages的路径适配没做好，下面一步步给你排查解决：

1. 先把webpack生产配置的publicPath改对 #

GitHub Pages部署后，你的应用是托管在https://<你的用户名>.github.io/<仓库名>/这个子路径下，不是根域名，所以webpack的publicPath必须和这个路径匹配，不然资源（包括CSS模块）都会加载错位置。

打开webpack.config.prod.js，找到output那一块，把publicPath改成你的仓库名：

output: {
  path: path.join(__dirname, 'build'),
  filename: '[name].[chunkhash].js',
  publicPath: '/test-repo/' // 这里换成你的仓库名称，别写错
}

2. 确保生产环境下CSS Modules配置正确 #

检查webpack.config.prod.js里的SCSS loader配置，得确认CSS Modules是开启状态：

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true, // 这个必须设为true，不然没法启用CSS Modules
          localIdentName: '[name]__[local]___[hash:base64:5]', // 和开发环境保持一致的命名规则，避免类名映射出错
          importLoaders: 1
        }
      },
      'sass-loader'
    ]
  })
}

要是之前这里没开modules，或者localIdentName没配置，就会导致CSS模块识别失败，出现undefined的错误。

3. 给package.json加个homepage字段 #

在package.json里添上homepage，指定GitHub Pages的访问地址：

"homepage": "https://ZeningQu.github.io/test-repo"

这个字段能帮React自动调整资源路径，避免加载资源时找不到位置。

4. 检查deploy脚本是否正确 #

确保你的deploy脚本是靠谱的，要是用gh-pages工具的话，脚本应该是这样的：

"scripts": {
  "deploy": "yarn run build && gh-pages -d build"
}

要是还没装gh-pages，先跑yarn add gh-pages --dev把依赖装上。

5. 确认组件里引入SCSS的方式没错 #

在load-data-pane组件里，得是用CSS Modules的方式引入样式：

import styles from './load-data-pane.scss';

然后在JSX里用className={styles.你的类名}，不能直接写字符串类名，这样才能正确映射到编译后的CSS类名。

做完这些步骤后，重新跑yarn run deploy，应该就能正常加载CSS模块，页面也能显示内容啦！

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