Laravel 中 CSS 文件必须放在 public/css/ 目录下并用 asset() 引入，才能确保部署路径和子路由下稳定加载不 404；其他路径（如 resources/css/）浏览器无法直接访问，必返回 404。
在 Laravel 项目中让 CSS 文件稳定加载、不因部署路径或子路由跳转而 404，关键不是“怎么引”，而是“放对地方再规范地引”——public/css/ 是唯一零配置、零兼容风险、所有 Laravel 版本通用的存放位置，其他路径都可能触发 404 或构建工具冲突。
必须放在 public/ 目录下，且推荐子目录为 css/
把 CSS 文件直接丢进 【public/css/style.css】，这是最简、最稳、最无脑的选择。Laravel 的 Web 服务器（Nginx/Apache）只将 public/ 目录设为 Web 根，除此之外任何路径（如 resources/css/、app/css/、bootstrap/css/）浏览器都无法直接访问，请求必返回 404。别被“源码放 resources、编译后放 public”这种说法带偏——如果你只是加一个轻量定制样式表，根本不需要走 Vite/Mix 编译流程。
这一步操作起来很简单，直接把 style.css 拖进你的项目根目录下的 public/css/ 文件夹就行。如果该文件夹不存在，手动创建即可。
Blade 中引用必须用 asset() 函数
在 Blade 模板的 里写：<link href="%7B%7B%20asset('css/style.css')%20%7D%7D" rel="stylesheet">。
立即学习“前端免费学习笔记（深入）”；
asset() 会自动补全协议、域名和子目录前缀。比如你部署在 https://example.com/myapp/，它生成的 URL 就是 https://example.com/myapp/css/style.css；若部署在根域，则是 https://example.com/css/style.css。硬写 /css/style.css 在子目录下会变成 /myapp/css/style.css → 404；写 css/style.css（相对路径）在 /admin/users 页面下会尝试请求 /admin/css/style.css → 同样 404。
不同构建方式下，路径规则完全不同
方法一：纯静态 CSS（推荐新手/小项目）
直接放 public/css/xxx.css → Blade 里用 {{ asset('css/xxx.css') }} → 完事。不用 npm、不配 vite.config.js、不跑 build 命令，改完保存就能刷出来。
方法二：Vite 构建项目（Laravel 9+ 默认）
源文件放 resources/css/app.css → 运行 npm run dev 或 npm run build → 输出带哈希名的文件到 public/build/ → Blade 中必须用 @vite(['resources/css/app.css'])，不能用 asset() 引 public/build 下的文件，因为哈希名每次变，asset() 不查 manifest。
方法三：Mix 构建项目（老项目常见）
源文件放 resources/sass/app.scss 或 resources/css/app.css → 运行 npm run dev → 输出到 public/css/app.css（或带哈希的 public/css/app-xxxx.css）→ Blade 中用 {{ mix('css/app.css') }}，mix() 会读取 public/mix-manifest.json 找真实文件名。
注意：Vite 和 Mix 的产物路径、哈希机制、引用函数完全不兼容，切勿混用。删掉旧构建残留（如 public/mix-manifest.json 或 public/build/）再切换工具，否则 asset() 或 mix() 会指向已删除的旧文件。
确保 CSS 加载顺序不影响样式覆盖
第一步：打开你的主布局文件，通常是 resources/views/layouts/app.blade.php。
第二步：找到 区域，在 <title></title> 后、 前插入一行： —— 如果没有这行，就手动加上。
第三步：在需要局部样式的子视图里（比如 resources/views/posts/show.blade.php），开头写：@section('styles')<link href="%7B%7B%20asset('css/posts-show.css')%20%7D%7D" rel="stylesheet">@endsection。
第四步：确认这个 @section('styles') 写在 @extends('layouts.app') 之后、@section('content') 之前，否则不会被注入到 head 中。
这样做的好处是：全局 CSS（如 Bootstrap）走 @vite 或 asset() 放在 head 最前面，而页面专属 CSS 插入在它们之后，避免被覆盖。如果把自定义 CSS 直接写死在子视图的 外部，Blade 渲染时它会跑到 body 里，根本不起作用。
