laravel 9与11中vite引入css需显式声明css入口、在app.js中import且@vite指令必须传入css路径，否则样式不加载或404；升级时须删public/build并清浏览器缓存。
在 Laravel 9 和 Laravel 11 中使用 Vite 引入 CSS 文件，表面看只是改个版本号的事，但实际操作中稍有不慎就会导致样式不加载、404 报错或缓存旧文件——尤其当你从 Laravel 9 升级到 11，或新装 Laravel 11 却照着 Laravel 9 教程配 Vite 时，问题立刻暴露。
Vite 入口配置和构建路径差异
第一步：确认你的 vite.config.js 是否包含 build.rollupOptions.input 显式声明入口。Laravel 9 默认不强制要求显式写死入口，而 Laravel 11 的官方脚手架（2024 年 3 月后发布）已将 resources/js/app.js 和 resources/css/app.css 同时列为输入项，且默认启用 CSS 提取（build.cssCodeSplit: true）。如果你沿用 Laravel 9 的配置却没补上 CSS 入口，Vite 会跳过编译 CSS，public/build/ 下压根没有 .css 文件。
第二步：检查 resources/js/app.js 是否仍保留 import '../css/app.css';。Laravel 11 不再容忍“CSS 只靠 import 引入却不被 Vite 显式识别为输入”的写法——它会把该 CSS 当作普通依赖处理，不生成独立哈希文件，也不出现在 @vite() 注入的 <link> 标签里。
第三步：运行 npm run build 后，打开 public/build/ 目录。Laravel 9 通常生成 assets/app.[hash].css；Laravel 11 默认生成 assets/app.[hash].css 和 assets/app.[hash].js，但若你删了 build.rollupOptions.input 里的 CSS 路径，就只剩 JS 文件——此时浏览器控制台会报 Failed to load resource: the server responded with a status of 404 ()，且找不到任何 CSS 请求。
@vite 指令调用方式是否要改
方法一：基础写法不变，但必须匹配入口数量。Laravel 9 和 Laravel 11 都支持 @vite(['resources/js/app.js'])，但如果只传 JS 入口，Laravel 11 不会自动推导并注入 CSS——它严格按你传入的数组路径去查找构建产物。所以，【务必显式加入 CSS 路径】：@vite(['resources/js/app.js', 'resources/css/app.css'])。
方法二：Laravel 11 支持单参数简写 @vite（无括号），前提是项目根目录下存在 vite.config.js 且其 build.rollupOptions.input 已正确定义多个入口。这个写法在 Laravel 9 中无效，会报 Undefined function @vite() 错误。
注意：如果用了 @vite 简写却忘了在 vite.config.js 中配置 CSS 入口，页面将完全无样式，且无任何报错提示——Vite 静默跳过未声明的资源。
public/build 目录残留引发的引用错乱
第一步：删除旧构建产物。从 Laravel 9 升级到 11 后，【必须手动删除 public/build/ 目录】，不能只跑 npm run build。因为 Laravel 9 的 Vite 插件生成的哈希名规则（如 app.a1b2c3.css）与 Laravel 11 的插件（v4.0+）不同，旧文件会残留并被 @vite 错误注入。
第二步：清空浏览器缓存并禁用“仅重新加载已更改资源”。Chrome 开发者工具 → Network → 勾选 “Disable cache”，否则即使你删了 public/build，浏览器仍可能从内存缓存加载旧 CSS。
第三步：查看页面源码，确认 <link rel="stylesheet"> 标签的 href 地址是否指向 /build/assets/app.[新哈希].css。如果还是 /build/app.css 或 /mix-manifest.json 路径，说明你还在用 Mix 的遗留配置，或者 Blade 模板里混写了 {{ mix('css/app.css') }}。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
