新项目必须用vite，老项目可继续用mix但不可混用；vite需js入口显式import css并用@vite指令注入，mix需通过mix()辅助函数且仅生产环境生效；禁止硬编码css路径或引用node_modules。
现在 Laravel 项目引入 CSS，选 Vite 还是 Mix，取决于你当前项目的构建状态和工程需求——新项目直接用 Vite，老项目若已稳定运行 Mix 且无升级动力，继续用 Mix 完全可行，但不要强行混用两者。
新 Laravel 9+ 项目：必须用 Vite 引入 CSS
执行 laravel new project 或 composer create-project laravel/laravel 创建的项目，默认不含 webpack.mix.js，也没有 public/mix-manifest.json 文件——这是 Vite 已接管的明确信号。
在 resources/css/app.css 中写样式 → 确保 resources/js/app.js 里有 import '../css/app.css' → Blade 模板中使用 @vite(['resources/js/app.js', 'resources/css/app.css']) 即可自动注入带哈希的 CSS 链接。
这一步不能省：Vite 不会扫描 HTML 或 Blade 中的 <link> 标签去打包 CSS，所有 CSS 必须被 JS 入口显式 import，否则生产构建后文件丢失。
开发时 npm run dev 启动的是 Vite Dev Server，它通过原生 ES 模块动态注入 CSS；生产时 npm run build 输出到 public/build/ 目录，@vite 指令会自动读取 manifest.json 并替换为带哈希的真实路径。
老项目还在用 Mix：可以继续，但必须守规矩
方法一：保持现状，沿用 Mix 流程
确认 webpack.mix.js 存在且含 .sass('resources/sass/app.scss', 'public/css') 或 .postCss('resources/css/app.css', 'public/css') → 运行 npm run production（不是 dev）生成 public/mix-manifest.json → Blade 中写 <link href="%7B%7B%20mix('css/app.css')%20%7D%7D" rel="stylesheet">。
【mix() 在开发环境默认不生效】 因为 .version() 只在 NODE_ENV=production 下触发，开发时若硬写 {{ mix('css/app.css') }} 会返回空字符串或 404，此时应改用未哈希路径或切换为 @vite。
方法二：迁移到 Vite（推荐但需清理）
删掉 webpack.mix.js 和 public/mix-manifest.json → 删除 node_modules 并重装依赖：npm install --save-dev vite laravel-vite-plugin → 创建 vite.config.js，内容至少包含 laravel({ input: ['resources/js/app.js'] }) → 把原来 Mix 的 CSS 导入逻辑挪进 app.js，比如 import '../css/app.css' → 替换 Blade 中所有 {{ mix() }} 为 @vite()。
迁移后务必清空浏览器缓存，否则旧的哈希 CSS 仍可能被 304 缓存命中，导致样式不更新。
Blade 中引用 CSS 的致命陷阱
绝对禁止在 Blade 中手写 <link href="/css/app.css" rel="stylesheet"> —— 这种硬编码路径在启用 .version() 或 Vite 哈希后必然失效，上线即白屏。
也禁止直引 node_modules 路径，例如 <link href="node_modules/tailwindcss/dist/tailwind.css"> —— Nginx 根本不会把 node_modules 当作 Web 可访问目录，请求直接 403。
Vite 和 Mix 的产物目录不同：Vite 默认输出到 public/build/，Mix 默认平铺在 public/。如果你用 CDN 或 Nginx 配置了静态资源路径，必须同步调整 root 或 alias，否则用户加载不到 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
