使用create-react-app在Heroku构建失败求助

你的本地OSX环境能正常运行，但用Mars Buildpack构建网站时总是报Module not found: Error: Can't resolve './Main.css'的错误，试过移动文件、调整引用方式都没用？这大概率是构建流程差异或者环境特性导致的，给你几个针对性的排查和解决方向：

1. 让构建脚本先编译CSS #

你本地开发时会手动执行build-css或者watch-css来生成.css文件，但Mars Buildpack默认只会运行npm run build，而你当前的build脚本并没有包含CSS编译步骤。

修改package.json里的build命令，让它先执行CSS编译，再进行React项目的构建：

"scripts": {
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "start": "react-scripts start",
  "build": "npm run build-css && react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

这样Buildpack在执行构建时，会先生成Main.css文件，再进行React的打包流程，就不会出现找不到文件的问题了。

2. 检查文件名大小写 #

本地OSX的文件系统是大小写不敏感的，但Buildpack运行的Linux环境对文件名大小写严格区分。仔细确认：

• 你的实际文件是Main.css还是main.css？
• 代码里的import './Main.css'是否和实际文件名完全一致？

如果大小写不匹配，修改其中一方统一即可。

3. 检查.gitignore规则 #

如果你的.gitignore里有类似src/*.css的规则，那本地生成的Main.css不会被提交到Git仓库。当Buildpack拉取代码时，服务器上就没有这个文件，自然会报错。

解决方式二选一：

• 要么移除.gitignore里对src/*.css的忽略，把编译后的CSS文件提交到仓库（不推荐，因为属于编译产物）；
• 要么确保构建流程会自动生成CSS文件（也就是第1点的修改，更推荐）。

4. 确认依赖是否正确安装 #

检查package.json的devDependencies里是否包含node-sass-chokidar，如果没有，执行npm install node-sass-chokidar --save-dev，然后提交package.json和package-lock.json的修改，这样Buildpack在构建时会自动安装这个依赖，确保能正常编译CSS。

优先试试第1点的修改，这是这类问题最常见的原因，应该能快速解决你的问题。

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