必须在主布局末尾添加@stack('styles')占位符，子视图用@push('styles')按需注入CSS，Vite场景用@vite指令处理哈希文件，并确保基础样式在@stack前引入以避免覆盖。
在 Laravel Blade 模板中为不同页面按需引入多个 CSS 文件，必须避开硬编码路径、避免样式覆盖失效、防止构建产物哈希不匹配导致 404——这些错误会让前端白屏或样式错乱。
主布局中预留可扩展的样式插槽
打开 resources/views/layouts/app.blade.php（或其他你实际使用的主布局文件），定位到 区域末尾。
在 标签前插入：@stack('styles')。
这行代码是关键入口，所有子视图通过 @push('styles') 注入的 CSS 都会按顺序追加到这里。不加这句，后续所有 @push 都不会生效。
立即学习“前端免费学习笔记（深入）”；
子视图中按需注入多个 CSS
在具体页面视图（如 resources/views/posts/index.blade.php）顶部，使用 @push 分批注入不同来源的 CSS：
方法一：本地静态文件（推荐用于自定义样式）
@push('styles')<br>
<link href="{{ asset('css/posts-list.css') }}" rel="stylesheet"><br>
<link href="{{ asset('css/toolbar-theme.css') }}" rel="stylesheet"><br>
@endpush
方法二：CDN 资源（仅限可信第三方库）
@push('styles')<br>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet"><br>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet"><br>
@endpush
【注意】CDN 链接必须放在 @push 内部，不能直接写在视图任意位置——否则无法保证加载时机和顺序，且可能被 HTML 压缩工具误删。
处理 Vite 构建产物的多 CSS 场景
Vite 默认将 CSS 打包进 public/build/ 并带哈希后缀，不能用 asset() 直接引用。
第一步：确认你的 resources/css/ 下有多个入口文件，例如：resources/css/posts.cssresources/css/admin.css
第二步：在子视图中用 @vite 指令一次性注入多个资源：@vite(['resources/css/posts.css', 'resources/js/posts-index.js'])
第三步：Vite 会自动解析依赖、注入带哈希的 <link> 和 <script></script> 标签，并启用热更新。如果只写 CSS 不写 JS，也得补上空数组占位，否则报错：@vite(['resources/css/posts.css'])
【不可逆操作】删掉旧的 public/build 目录再运行 npm run build，否则残留哈希文件会导致新 CSS 加载失败。
避免常见冲突的加载顺序控制
某些 UI 库（如 Bootstrap）的 CSS 必须早于自定义样式加载，否则会被覆盖。
① 在主布局 最顶部引入全局基础样式：<link href="%7B%7B%20asset('css/bootstrap.min.css')%20%7D%7D" rel="stylesheet">
② 紧接着插入 @stack('styles') 占位符。
③ 所有子视图的 @push('styles') 内容都会追加在它后面，天然形成「基础样式 → 组件样式 → 页面样式」的层级顺序。
这个顺序不能颠倒。如果把 @stack('styles') 放在 bootstrap.min.css 上方，你的自定义样式就会被 Bootstrap 覆盖，调试时找不到原因。
