laravel mix 编译后 css 引入路径出错，90% 是 mix.js() 或 mix.postcss() 的源路径写错、输出目录没落在 public/ 下，或 blade 中用了 {{ mix() }} 却漏传 public/mix-manifest.json；路径必须基于项目根目录相对书写，不接受 ./ 开头或绝对路径，且输出目录必须为 public/ 下的子路径，否则 nginx 无法服务导致 404。
直接说结论：Laravel Mix 编译后 CSS 引入路径出错，90% 是 mix.js() 或 mix.postCss() 的源路径写错、输出目录没落在 public/ 下，或 Blade 中用了 {{ mix() }} 却漏传了 public/mix-manifest.json。
mix.js() 和 mix.postCss() 的路径必须严格按根目录相对写
这两个方法不接受 ./ 开头，也不接受绝对路径。它们的“起点”永远是项目根目录（即 webpack.mix.js 所在位置）。
-
mix.postCss('resources/css/app.css', 'public/css')✅ 正确：源文件存在，输出到public/css/app.css -
mix.postCss('css/app.css', 'css/')❌ 错误：源路径找不到（css/不在根目录），输出也没进public/，Blade 里{{ mix('css/app.css') }}会返回/css/app.css，但 Nginx 实际只服务public/下内容，必然 404 - 如果用了
mix.setPublicPath('dist')，输出就变成dist/css/app.css，但{{ mix() }}仍按默认public/拼路径，除非你同步改了 Web 服务器的 document root
Blade 中用 {{ mix() }} 就必须有 mix-manifest.json
{{ mix('css/app.css') }} 不是直接拼 URL，而是查 public/mix-manifest.json 里的映射表。开发时它可能自动生成，但上线常被漏掉。
- 这个文件只在
npm run prod（即MIX_ENV=production）时生成，npm run dev默认不生成 - CI/CD 脚本若没显式上传
public/mix-manifest.json，哪怕 CSS 文件都在，{{ mix() }}也会返回原始路径（比如/css/app.css），而实际文件可能是/css/app.css?id=abc123 - 检查方法：直接访问
https://yoursite.com/mix-manifest.json，看是否能打开、内容是否包含"css/app.css"键
CSS 文件内部的 url() 路径和 HTML 完全无关
比如 public/css/app.css 里写了 background: url('../images/logo.png')，浏览器会以 public/css/ 为基准去找 public/images/logo.png，不是从 Blade 模板位置算。
- 常见翻车点：把图片放在
resources/images/，却在 CSS 里写url('../images/logo.png')—— 构建后图片被复制到public/images/，但 CSS 输出在public/css/，所以../images/刚好对上；但如果输出目录改成public/assets/css/，../images/就变成public/assets/images/，就 404 - 更稳的做法：统一用
url('/images/logo.png')（根路径），或让 PostCSS 插件（如postcss-copy）自动处理，但需明确配置from和to - 别依赖构建工具“猜路径”，显式声明资源位置更可靠
最易被忽略的是：路径逻辑在本地 php artisan serve 和线上 Nginx/Apache 下表现一致，但 document root 配置不同会导致 / 开头的路径指向完全不同的物理目录。动了 mix.setPublicPath() 或改了 Web 服务器配置，必须两端同步验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
