Vite 是 Laravel 10+ 引入 CSS 的首选，因其热更新快、启动秒级、CSS 模块化友好；需在 app.js 中显式 import CSS，并在 vite.config.js 中声明 CSS 路径，Blade 中用 @vite 指令注入。
直接用 Vite 编译并注入 CSS，别碰 Laravel Mix 了——它已不再默认集成，且配置成本高、维护吃力。
为什么 Vite 是当前 Laravel 项目引入 CSS 的首选
Laravel 10+ 默认使用 Vite 替代 Mix，核心优势是热更新快、启动秒级、CSS 模块化支持天然友好。Mix 基于 Webpack，配置分散（webpack.mix.js）、watch 卡顿、HMR 经常失灵，尤其在 Windows 或 WSL 下容易触发 EMFILE 错误。
如果你还在用 Mix，迁移成本其实很低：删掉 webpack.mix.js 和 node_modules，按官方 Vite 配置重装即可。
如何让 Vite 正确编译并注入 app.css
Vite 不会自动把 CSS 注入 HTML，必须显式 import。常见错误是只在 resources/css/app.css 写样式，却没在入口 JS 中引用，导致页面无样式。
立即学习“前端免费学习笔记（深入）”；
- 确保
resources/js/app.js开头有：import '../css/app.css';
- 检查
vite.config.js是否保留默认的 Laravel 插件：import { defineConfig } from 'vite';<br>import laravel from 'laravel-vite-plugin';<br><br>export default defineConfig({<br> plugins: [laravel(['resources/js/app.js', 'resources/css/app.css'])],<br>});注意：第二个参数数组里必须显式列出resources/css/app.css，否则 Vite 不会监听它变化 - Blade 模板中用
@vite(['resources/js/app.js'])，Vite 会自动推导并注入对应的 CSS link 标签
遇到「CSS 修改不生效」或「404 /mix/」错误怎么办
典型现象是改了 app.css 但浏览器没更新，或者页面报 GET /mix/xxx.css 404 ——这说明你还在用 Mix 的旧写法，但项目实际跑的是 Vite。
- 删掉 Blade 中所有
@mix('...')，换成@vite('...')或@vite(['resources/js/app.js']) - 确认
npm run dev进程正在运行，Vite 的 CSS 热更新依赖 dev server，不是文件保存就完事 - 清空浏览器缓存或禁用缓存（DevTools → Network → ✅ Disable cache），Vite 的 CSS 文件名带哈希，但开发时用的是未哈希的
/assets/app.css，缓存可能导致旧版本残留 - 如果用了 Tailwind，确保
tailwind.config.js的content字段包含 Blade 路径，否则 purge 后样式消失：content: [<br> './resources/**/*.blade.php',<br> './resources/**/*.js',<br>],
要不要单独编译 CSS 文件（比如不走 JS 入口）
可以，但没必要。Vite 官方不推荐“纯 CSS 入口”，因为会丢失 HMR 和 PostCSS 处理链（如 Autoprefixer）。强行分离会导致：
- 无法使用
@layer、@apply等 Tailwind 功能（它们依赖 JS 上下文解析） - PostCSS 插件（如
postcss-nested）不会作用于独立 CSS 文件 - 必须手动在 Blade 中加
<link rel="stylesheet" href="{{ Vite::asset('resources/css/app.css') }}">，失去自动注入和依赖追踪
真正需要分离的场景极少，比如 legacy 系统嵌入静态 CSS；日常开发请坚持 “JS 入口 import CSS” 这一模式。
最易被忽略的一点：Vite 的 CSS 处理默认启用 lightningcss（Laravel 11+），它不支持某些 PostCSS 插件（如 postcss-import）。如果用了 @import，要么关掉 lightningcss，要么改用 @use ——这个细节没人提，但会卡住整个构建流程。
