直接将 css 放入 public/css/ 并用 {{ asset('css/style.css') }} 引入是最稳、最快、零配置的方案；若放错位置（如 resources/css/）或硬编码路径，必导致 404。
public/css/ 目录下放 CSS 就别走构建流程了
如果你只是加个 style.css 用于小范围定制、调试或临时覆盖，直接扔进 public/css/，然后用 {{ asset('css/style.css') }} 引入——这是最稳、最快、零配置的方案。Vite 或 Mix 构建流程此时是干扰项，不是必需品。
常见错误现象：
- 把
custom.css放进resources/css/，却在 Blade 里写{{ asset('css/custom.css') }}→ 浏览器请求/css/custom.css→ 404（因为该路径下根本没文件） - 误以为“放对地方=自动编译”，结果改完保存刷新，样式完全不生效，Network 面板里连请求都没发出去
真正需要构建流程的场景只有两个：
- CSS 源码用了 Sass/Less/Tailwind @layer 等需预处理的语法
- 你明确要求哈希文件名、CSS 代码分割、tree-shaking 或 HMR 热更新
Vite 项目必须让 JS 入口 import CSS 才能打包
Laravel 11 默认用 Vite，resources/css/app.css 是源码，不是可访问资源。它不会自动变成 public/build/app.xxxx.css，除非被 JS 文件显式引用。
关键操作：
- 确认
resources/js/app.js第一行是import '../css/app.css';—— 缺了这行，Vite 根本不处理该 CSS -
@vite指令必须同时传入 CSS 和 JS 入口：@vite(['resources/css/app.css', 'resources/js/app.js'])，只传 CSS 会报Failed to load module script - 运行
npm run dev后，检查public/build/是否生成了带哈希的.css文件；没有说明构建未触发
容易踩的坑：
- 删了
app.js里的import行，又忘了补回来 - 在
@vite里只写['resources/css/app.css']，导致开发服务器启动失败 - 修改了
resources/css/下的文件，但没重启npm run dev，HMR 不生效
按页面拆分 CSS 时，Vite 动态 import 是唯一可靠方式
想给 /users 页面单独加载 users.css，别在 Blade 里硬写 {{ asset('css/users.css') }}，也别在 app.css 里 @import —— 前者绕过构建无法享受哈希和压缩，后者会让所有页面都加载该 CSS，失去拆分意义。
正确做法是：在对应 JS 入口或组件中动态导入
- Vue 组件开头加：
import('./../../css/pages/users.css'); - 路由定义中组合加载：
component: () => import('../pages/UserList.vue').then(() => import('../css/pages/users.css'))
这样 Vite 才会在构建时为该 CSS 单独生成带哈希的文件，并确保只在访问该路由时加载。Blade 中不需要任何额外 @push 或 @stack 配合。
注意点：
- 动态 import 的路径必须是相对路径，且以
./或../开头，不能用@/别名（Vite 默认不解析 CSS 文件内的别名） - 如果 CSS 里用了 Tailwind 指令，确保该文件也 import 了
@tailwind base等基础层，否则 utility class 不生效
构建产物路径错乱？先清空 public/build 再重跑
Vite 默认输出到 public/build/，但旧构建残留的哈希文件可能和新内容不匹配，导致 @vite 注入了错误的 href，浏览器请求一个已不存在的 .css 文件，返回 404。
解决方法很简单：
- 停掉
npm run dev - 手动删除整个
public/build/目录 - 重新运行
npm run build（生产）或npm run dev（开发）
这个动作比查 vite.config.js 或重装依赖更有效。很多“样式突然消失”问题，根源就是 public/build/ 里混着上一版的哈希文件，而 vite-manifest.json 已指向新版，但旧文件还在干扰请求路径。
顺带提醒：Vite 构建后不会自动清理旧文件，这点和 Mix 不同，必须手动干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
