Laravel 项目中 Vite 与 Mix 共存会导致样式覆盖、白屏等问题，需彻底卸载 Mix 并清空产物，改用 Vite 管理资源；CSS 加载顺序可通过 @vite 数组顺序或 Blade 中显式 link 控制，最终以 HTML 源码中的 link 标签顺序为准。
当 Laravel 项目中 Vite 和 Mix 同时存在，CSS 文件会因构建策略冲突导致样式覆盖、白屏、热更新失效或资源重复加载——这不是配置顺序问题，而是两个工具在 public/ 目录下同时写入、监听、注入资源造成的根本性互斥。
确认是否真的共存
运行 ls -la | grep -E "(webpack|vite)" 检查项目根目录是否存在 【webpack.mix.js】 和 【vite.config.js】 两个配置文件；再执行 npm run dev，观察控制台输出是否含 Vite v 或 Webpack 字样——只要两者都出现，就已实际共存，必须立刻终止其中一个。
别信“我只用 Mix 编译 CSS，Vite 只跑 JS”这种说法：Vite 默认把所有 CSS 合并进一个 chunk，Mix 却按入口拆分并硬拷贝到 public/css/，最终 HTML 中会同时插入两套 标签，浏览器按后加载者胜出规则渲染，你根本不知道哪条规则生效。
彻底移除 Laravel Mix
第一步：卸载全部 Mix 相关依赖
立即学习“前端免费学习笔记（深入）”；
npm uninstall laravel-mix webpack webpack-cli webpack-dev-server cross-env
第二步：删除残留文件与产物
执行 rm -f webpack.mix.js public/mix-manifest.json public/css/app.css public/js/app.js；【特别注意：public/js/ 和 public/css/ 下所有 Mix 生成的文件必须清空，否则 Nginx/Apache 可能优先命中旧资源】
第三步：检查 package.json 脚本
将 "dev": "npm run development" 或 "dev": "mix" 替换为 "dev": "vite"；删掉 "production": "mix --production" 这类 Mix 专属脚本。
修复 CSS 加载顺序错乱
方法一：强制 Vite 入口 CSS 优先注入
在 vite.config.js 的 build.rollupOptions.output.manualChunks 中，把重置样式（如 resources/css/reset.css）单独打成 vendor-base 块，并确保它在 @vite(['resources/css/reset.css', 'resources/css/app.css']) 中排第一——Vite 会按数组顺序注入 标签，但仅限于同一构建上下文。
方法二：放弃 JS import CSS，改用 Blade 显式 link
在 app.blade.php 的 <head> 中，手动写：
<link rel="stylesheet" href="{{ asset('build/reset.css') }}">
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
这样完全绕过 Vite 的 CSS 合并逻辑，由模板控制顺序，100% 可控。注意：路径必须对应 vite build 后 public/build/ 下的真实文件名，不能写 resources/css/。
验证 CSS 是否真正生效
第一步：启动开发服务器
运行 npm run dev，打开浏览器开发者工具 → Network 标签页，筛选 css，确认只加载了 /@vite/client 和 /assets/app.***.css 两类请求，且无 /css/app.css 等 Mix 路径。
第二步：检查生产构建产物
执行 npm run build 后，进入 public/build/ 目录，确认存在 manifest.json 文件，且其中 "resources/css/app.css" 对应的键值指向带哈希的 CSS 文件名；若 manifest.json 缺失或为空，页面必白屏。
第三步：审查最终 HTML 输出
访问任意页面，右键 → 查看网页源代码，搜索 <link，确认只有两条 CSS 链接，且顺序与你在 @vite 数组或 <link> 中声明的一致——这是唯一可信的验证方式。
