Laravel 中应严格区分 CDN 与本地 CSS：CDN 用原始 link 标签引入，本地 CSS 用 asset() 或 @vite/mix；CDN 必须在本地 CSS 前加载；禁止 CDN 中 @import 本地文件；需配置 onerror 回退或 JS 动态加载；本地 CSS 必须启用哈希版本控制。
在 Laravel 项目中同时使用 CDN 引入第三方 CSS（如 Bootstrap、Font Awesome）和本地自定义 CSS 文件时，若未理清加载路径、缓存机制与资源作用域，极易出现样式覆盖失效、404 报错、调试困难或生产环境样式丢失等问题。
确认 asset() 和 CDN URL 不混用同一类资源
第一步：明确区分两类资源的来源边界。CDN 资源（如 https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css）必须通过原始 <link> 标签引入；本地 CSS（如 resources/css/app.css）必须经构建后输出至 public/，再由 asset() 生成路径。
第二步：禁止对 CDN 资源调用 asset() —— 它会把 asset('https://cdn...') 错误拼接为 https://yoursite.com/https://cdn...，直接 404。
第三步：禁止对本地资源硬编码 /css/app.css —— 部署在子目录（如 https://example.com/admin）时路径立即断裂，asset() 才能自动适配前缀。
立即学习“前端免费学习笔记（深入）”；
加载顺序必须严格按依赖关系排列
CDN 的 Bootstrap CSS 必须在本地自定义 CSS 之前加载，否则你的 .btn-primary 覆盖规则会被 Bootstrap 的同名选择器压掉——因为后者后解析、权重相同、后声明者胜。
把 CDN CSS 放在 <head> 最顶部，本地 CSS（用 {{ asset('css/app.css') }}）紧随其后；若使用 Vite 或 Mix 构建的本地 CSS，则通过 @vite 或 {{ mix('css/app.css') }} 插入，它们默认注入在 <head> 内且位置可控。
【CDN CSS 不支持 @import 本地文件】 —— 浏览器禁止跨域 CSS 中使用 @import url('/css/custom.css')，会静默失败且不报错，样式彻底丢失。
CDN 故障时本地回退方案要真实可用
方法一：双 <link> + onerror 回退（仅适用于单个 CDN 文件）：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" onerror="this.href='{{ asset('css/bootstrap.fallback.min.css') }}'">
方法二：JavaScript 检测 + 动态加载（更可靠，支持多文件）：
在 <head> 底部插入脚本，用 document.createElement('link') 加载 CDN，失败后立即加载本地副本；注意此脚本必须在所有依赖 Bootstrap 的 JS 运行前执行，否则组件初始化报错。
【回退文件必须提前存入 public/css/ 且经 asset() 验证可访问】 —— 若 bootstrap.fallback.min.css 实际不存在或权限错误，回退即失效，页面将无任何 Bootstrap 样式。
缓存策略需分层控制
CDN 提供方通常设置强缓存（Cache-Control: public, max-age=31536000），你无法控制；但本地 CSS 必须启用版本哈希（Vite/Mix），否则用户可能长期卡在旧版样式里。
运行 npm run build 后，检查 public/build/（Vite）或 public/mix-manifest.json（Mix）是否生成带哈希的新文件名；Blade 中必须用 @vite 或 {{ mix('css/app.css') }}，不能写死 asset('css/app.css')。
开发阶段禁用浏览器缓存调试：Chrome DevTools → Network → 勾选 “Disable cache”，避免旧 CSS 干扰验证。
