React项目执行npm run start/build时报错找不到assets/css/style.css如何解决

核心问题定位 #

所有报错的根源是编译时找不到assets/css/style.css文件，后续npm run build失败是因为构建流程先执行npm run build-css命令，该命令执行失败后直接终止了整个构建流程，抛出ELIFECYCLE错误，和npm本身无关。

排查操作步骤 #

• 核对文件路径与大小写
  先查看项目src目录下是否存在assets/css/style.css文件，注意文件名大小写：MacOS默认对文件名大小写不敏感，但如果构建工具开启了严格校验，或者文件实际名称是Style.css/style.min.css这类写法，都会触发找不到文件的报错。
• 检查css引用路径写法
  打开报错提到的src/app/App.js文件，找到引入style.css的代码行：
  • 如果用的是相对路径，App.js处于src/app目录下，需要回到上一级目录才能访问到src/assets，所以正确的相对路径应该是../assets/css/style.css，如果当前写的是assets/css/style.css会直接在src/app目录下查找，自然找不到对应文件。
  • 如果用的是别名绝对路径，需要确认webpack、craco等构建工具的别名配置是否正确，assets别名是否映射到了src/assets目录。
• 校验build-css脚本逻辑
  打开项目根目录的package.json，找到scripts字段下的build-css对应的执行命令，确认该命令的编译输出路径是否和App.js中引用的css路径一致：如果你的css是从scss/less等预处理器文件编译生成的，常见问题是编译后的输出路径配置错误，导致生成的css文件没有落到assets/css目录下。
  你可以单独执行npm run build-css命令，查看控制台有没有单独的报错，比如预处理器依赖缺失、源文件不存在等问题，先解决这一步的报错再执行启动或构建命令。
• 兜底配置调整
  如果确认文件存在、路径写法正确还是报错，可以在项目根目录新建.env文件，添加一行配置NODE_PATH=src，让构建工具默认从src目录开始查找模块，解决绝对路径引用的查找问题。

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