Laravel 8→11 未强制变更 CSS 引入语法，但因默认构建工具从 Mix 切换为 Vite，@vite 指令成为推荐方式，需传数组路径、配合 vite.config.js 配置入口，否则导致 404 或 HMR 失效。
确认 Laravel 8→11 是否改动了 CSS 引入机制
从 Laravel 8 升级到 11 后，CSS 文件本身的引入方式（如 <link rel="stylesheet"> 或 @vite）没有被框架强制变更，但默认构建工具链、资源路径约定、Vite 配置行为和 Blade 指令支持发生了实质性调整——不更新引入逻辑，会出现 404、缓存不刷新、HMR 失效或生产环境样式丢失。
旧项目中常见的 CSS 引入方式适配要点
如果你的 Laravel 8 项目用的是 Mix + Webpack（mix.css() / <link href="{{ mix('css/app.css') }}">），升级到 11 后必须切换至 Vite，默认不再内置 Mix 支持。
第一步：确认当前是否仍在用 Mix —— 运行 npm run dev 看控制台输出是否含 webpack 字样；若出现 vite 或报错 Cannot find module 'laravel-mix'，说明 Mix 已失效。
第二步：安装 Vite 支持：composer require laravel/vite-plugin → 运行 php artisan vendor:publish --tag=vite-config → 检查根目录是否生成 vite.config.js。
立即学习“前端免费学习笔记（深入）”；
【vite.config.js 必须显式配置 css 路径，否则 public/css/ 下的文件不会被自动处理】。默认配置只监听 resources/css/app.css 和 resources/js/app.js，若你把样式放在 public/css/custom.css，Vite 不会打包、不会哈希、也不会注入 <link> 标签。
Blade 中引入 CSS 的三种写法对比
方法一：使用 @vite 指令（Laravel 11 推荐）
直接在 Blade 布局顶部写 @vite(['resources/css/app.css', 'resources/js/app.js'])，Vite 会自动注入带哈希的 <link> 和 <script> 标签，并启用 HMR。这一步不能省略，也不能用 <link href="/css/app.css"> 替代——后者绕过 Vite，导致开发时样式不热更新、生产环境无版本控制。
方法二：手动 <link> 引入（仅限静态资源）
若你坚持用 public/css/ 下的纯 CSS 文件（如 public/css/print.css），可直接写 <link rel="stylesheet" href="{{ asset('css/print.css') }}">。但注意：该文件不会被 Vite 处理，无自动哈希、无依赖分析、无 PostCSS 支持，且 asset() 返回的 URL 不经过 Vite 构建管道。
方法三：内联 CSS（仅限极小片段）
Laravel 11 允许在 Blade 中用 @once @push('styles') 注入内联样式，但不推荐用于主样式表——它无法被浏览器缓存，且会阻塞渲染。仅适用于页面级覆盖规则，例如 <style>.hero { background: linear-gradient(...); }</style>。
关键检查项：CSS 能否正常加载
① 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 查看所有 .css 请求的状态码和响应头。
② 若看到 404 且路径为 /build/assets/app.xxxxx.css，说明 Vite 构建未运行或 vite.config.js 中 build.outDir 被错误修改。
③ 若看到 200 但样式未生效，检查响应内容是否为空——常见原因是 resources/css/app.css 文件里写了 @import 但没配 postcss-import 插件。
④ 若开发时改了 CSS 却没变化，确认终端是否正在运行 npm run dev（不是 npm run build），且浏览器未启用“禁用缓存”以外的干扰选项。
【public/mix-manifest.json 在 Laravel 11 中完全失效，删掉它，否则 mix() 辅助函数仍会尝试读取并抛出异常】。
