Laravel 8使用Laravel Mix时CSS与JS文件无法编译问题咨询

1. 依赖完整性校验 #

• 先删除本地依赖缓存与锁定文件：

  rm -rf node_modules
  rm package-lock.json yarn.lock
  

• 重新安装依赖，避免网络问题导致的依赖包缺失：

  npm install
  

2. Node 版本兼容校验 #

Laravel Mix 6.x 适配的 Node 版本范围为 14.x ~ 16.x，高于 17.x 或低于 14.x 都可能出现兼容问题，可通过以下命令查看当前 Node 版本：

node -v

版本不符建议使用 nvm 切换对应版本后重新编译。

3. 配置与资源文件匹配校验 #

• 确认resources/js/app.js、resources/css/app.css文件实际存在，路径与webpack.mix.js中配置完全一致
• 如果你实际使用的是 Scss 语法编写样式（你已安装sass、sass-loader依赖），需要将webpack.mix.js中的postCss方法替换为sass：

  mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');
  

  注意同步修改样式文件的存放路径与后缀。

4. 目录权限校验 #

Linux/macOS 环境下需确认public/js、public/css目录具备当前运行用户的写入权限，无权限可执行：

chmod -R 755 public/js public/css

5. 编译执行校验 #

确认使用正确的编译命令：

• 单次开发环境编译：npm run dev
• 监听文件变更自动编译：npm run watch
• 生产环境压缩编译：npm run prod
  编译时注意查看控制台输出的错误提示，可根据具体错误信息进一步定位问题。

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