laravel 中 css 和 js 必须按依赖分层加载：样式在 内 后依次为重置、第三方框架、业务组件、主题覆盖；js 在 前按 popper→bootstrap→业务脚本顺序引入，否则下拉菜单等将失效。
在 Laravel 项目中，CSS 和 JS 文件的引入顺序直接影响页面渲染、脚本执行和样式覆盖效果，错位会导致白屏、FOUC（闪屏）、组件初始化失败或自定义样式被第三方库覆盖。
基础加载顺序原则
所有 <link rel="stylesheet"> 必须放在 内，且紧贴 <title></title> 后；所有 <script></script>（非模块化/非 defer）必须放在 前。这是浏览器解析规则决定的——CSS 阻塞 HTML 解析，JS 同步脚本阻塞后续 HTML 渲染。
顺序不是“先 CSS 后 JS”这么简单，而是按作用域与依赖关系分层：
- 重置与基础样式（reset.css、normalize.css、common.css）→ 最先加载
- 第三方 UI 框架样式（Bootstrap、Layui、Tailwind 的 base/utilities）→ 紧随其后
- 业务组件样式（button.css、card.css、form.css）→ 中间层
- 主题/覆盖样式（dark-mode.css、theme-overrides.css）→ 最后加载
- JS 文件：Popper.js → Bootstrap.js → 自定义业务 JS → 最底部
⚠️ 注意：【Bootstrap 5.2 依赖 Popper，但不内置；若漏掉 Popper 或顺序颠倒，下拉菜单、Tooltip 将完全失效】
Blade 模板中的具体写法
在 resources/views/layouts/app.blade.php 中，按以下结构组织：
在 内，<title></title> 标签下方立即插入样式链：
<link href="%7B%7B%20asset('css/reset.css')%20%7D%7D" rel="stylesheet"><link href="%7B%7B%20asset('css/bootstrap.min.css')%20%7D%7D" rel="stylesheet"><link href="%7B%7B%20asset('css/app.css')%20%7D%7D" rel="stylesheet">
在 标签前，按依赖顺序插入脚本：
<script src="%7B%7B%20asset('js/popper.min.js')%20%7D%7D"></script><script src="%7B%7B%20asset('js/bootstrap.min.js')%20%7D%7D"></script><script src="%7B%7B%20asset('js/app.js')%20%7D%7D"></script>
这一步操作起来很简单，直接把文件拖进去就行。但若你用的是 Vite 构建，@vite(['resources/css/app.css', 'resources/js/app.js']) 会自动注入带哈希的资源，并确保 CSS 在 JS 前加载——它内部已按依赖排序，无需手动干预。
按需加载子页面专属资源
当不同页面需要不同 JS/CSS（如后台管理页要 Chart.js，登录页要验证码插件），不能全塞进主模板造成冗余加载。
方法一：使用 Blade 的 @stack / @push 机制
在主模板
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
