vite 和 mix 互斥，混用会导致资源 404、hmr 失效等；需通过文件存在与否及进程确认工具，再按各自规则配置 css 引入与清理残留。
必须二选一，不能混用 —— Vite 和 Mix 是互斥的构建层，同时存在会导致资源 404、HMR 失效、CSS 变量丢失甚至白屏。
确认当前项目用的是 Vite 还是 Mix
先看有没有 webpack.mix.js 文件：有且 npm run dev 启动的是 Webpack Dev Server（默认端口 :8080），就是 Mix；没有、但存在 vite.config.js 且 npm run dev 启动的是 vite（默认端口 :5173），就是 Vite。别凭印象判断，ps aux | grep -i "vite\|webpack" 看实际进程更准。
常见错误现象：
- Blade 里写了
@vite(['resources/css/app.css'])却加载出错，其实是项目还在跑 Mix - 删了
webpack.mix.js但没清public/mix-manifest.json，mix()函数仍返回旧路径，导致 CSS 加载错版本 - 误以为
asset('css/app.css')能替代@vite，结果开发时 404（Vite 开发模式不把文件写入public/）
Vite 下正确引入 CSS 的三个硬性条件
Vite 不会自动提取或注入 CSS，它依赖 JS 入口的显式 import 触发处理。所以光在 Blade 里写 @vite 不够，必须满足：
-
resources/js/app.js（或其他入口 JS）中必须有import '../css/app.css'—— 路径要对，且不能漏掉.css后缀 -
vite.config.js中的build.rollupOptions.input或laravel({ input: [...] })必须包含这个 JS 入口文件（如'resources/js/app.js'），否则 CSS 不进构建图 - Blade 模板中只能用
@vite(['resources/css/app.css', 'resources/js/app.js'])，路径必须和vite.config.js中声明的入口完全一致（大小写、斜杠方向、是否带resources/前缀）
如果用了 Tailwind，确保 resources/css/app.css 里按顺序写了：@tailwind base;、@tailwind components;、@tailwind utilities;，Vite 不会像 Mix 那样自动补全 PostCSS 配置。
Mix 下引入 CSS 的关键配置点
Mix 的 CSS 引入靠 mix() 函数 + mix-manifest.json 映射，核心是让 Webpack 知道“编译目标”和“输出位置”：
-
webpack.mix.js中必须调用.postCss('resources/css/app.css', 'public/css')或.sass()/.stylus()等对应方法，不能只写.js() - 确保
public/mix-manifest.json存在且内容有效（比如{"/css/app.css": "/css/app.css?id=abc123"}），部署后若删了它，mix()会 fallback 到原始路径，导致无哈希、缓存问题 - Blade 中必须用
{{ mix('css/app.css') }}，路径是相对于public/的输出路径，不是源文件路径（比如不能写{{ mix('resources/css/app.css') }}）
注意：Mix 默认不处理 @import 的 CSS 文件，除非它们被主入口文件直接引用或显式加入构建链。
切换工具时最容易被忽略的清理动作
从 Mix 切 Vite 或反过来，90% 的 CSS 加载失败源于残留文件和缓存：
- 停掉所有开发服务器后，执行：
rm -f webpack.mix.js public/mix-manifest.json public/build/ manifest.json node_modules/.bin/webpack* - 清空浏览器缓存（尤其是 Service Worker），或开无痕窗口测试
- 检查
config/vite.php中的'build_directory'是否为'build'（默认值），并与vite.config.js的build.outDir严格一致 - Vite 生产环境必须上传
public/build/manifest.json，这个文件丢了，@vite就只能回退到未哈希路径，CDN 或反向代理可能缓存旧版
真正麻烦的从来不是怎么写那行 @vite 或 mix()，而是构建产物路径、manifest 文件、Blade 路径、vite.config.js 入口数组这四者之间差一个字符就全崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
