laravel 11 中不能直接用 asset('css/app.css')，因为该路径下无文件——css 源码在 resources/css/，需经 vite 编译输出至 public/build/ 带哈希名的文件，且必须由 resources/js/app.js 显式 import 后通过 @vite 指令注入才能正确加载。
在 Laravel 11 中引入 CSS 文件，核心就一条：CSS 必须由 resources/js/app.js 显式 import，再经 Vite 编译输出到 public/build/；直接在 Blade 里用 asset() 引用未编译的源文件（如 resources/css/app.css）一定失败。
为什么不能直接用 asset('css/app.css')？
Laravel 11 默认用 Vite，public 目录下根本不存在 css/app.css —— 它只存在于 resources/css/，是源码，不是可访问的静态资源。Vite 构建后生成的是带哈希名的文件，比如 public/build/assets/app.xxxxx.css，必须通过 @vite 指令注入才能正确加载。
- 硬写
<link href="/css/app.css">或{{ asset('css/app.css') }}→ 浏览器发请求到/css/app.css→ 404 -
@vite会读取vite-manifest.json，自动映射到真实带哈希的路径，并启用 HMR - 开发时若看到样式不生效，先打开浏览器 Network 面板，确认 CSS 请求是否 404，再查是不是漏了
import '../css/app.css'
@vite 的正确用法和常见报错
@vite 是 Laravel 11+ 唯一推荐的前端资源注入方式，它不只是加个 <link>，而是启动整个 Vite 开发服务器链路。
- 必须在 Blade 的
中使用：@vite(['resources/css/app.css', 'resources/js/app.js']) - 参数必须是数组，且至少包含一个 JS 入口（Vite 要靠 JS 触发 CSS 加载）
- 如果只写
@vite(['resources/css/app.css'])→ 报错Failed to load module script，因为没 JS 入口 - 确保
resources/js/app.js里有import '../css/app.css'，否则 CSS 不会被打包进构建产物 - 运行
npm run dev后，Vite 服务必须处于活跃状态，否则@vite渲染出的脚本会 404
如何为某个 Blade 页面单独加 CSS？
不能在子视图里直接写 <link>，也不能用 @section('styles') 然后指望父布局自动渲染——除非你提前在父布局中定义了 @yield('styles') 并放在 里合适位置。
- 修改
resources/views/layouts/app.blade.php，在内、@vite之后加：@yield('styles') - 在子视图中写：
@section('styles')<link href="%7B%7B%20asset('css/page-specific.css')%20%7D%7D" rel="stylesheet">@endsection - 注意：这种写法只适用于已编译好的 CSS（即已存在
public/css/page-specific.css），不是 Tailwind 源文件 - 如果该 CSS 也要走 Tailwind 编译流程，建议把它 import 到
app.js或新建一个入口 JS 文件统一管理
Tailwind CSS 必须按顺序写三行 @tailwind
哪怕只漏掉其中一行，对应层的样式就不会生效，而且没有任何错误提示，页面看起来“像没装 Tailwind”。
-
resources/css/app.css中必须严格按顺序写：@tailwind base; @tailwind components; @tailwind utilities;
- 顺序错（比如把
utilities放最前）→ 工具类可能被重置，text-red-500看不见 - 少写一行（比如删了
@tailwind components）→ 自定义组件类（如@layer components定义的）不会编译进去 - 这些指令只在 Vite + PostCSS 环境下解析，直接丢进 public 当普通 CSS 引入完全无效
最容易忽略的点是：Vite 不会自动扫描 resources/css/ 下的任何文件，所有 CSS 都得从 JS 入口显式 import 进来；而 @vite 只负责把 JS 入口加载进页面，它本身不处理 CSS —— 那是 PostCSS 和 Vite 插件的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
