Laravel 11 中 CSS 必须通过 Vite 显式声明入口并构建，不可直接用 asset() 引入未构建文件；需在 bootstrap/app.php 的 withVite() 中添加 CSS 路径（如 'resources/css/app.css'），Blade 中用 @vite(['...']) 在 head 内引入，且支持 Sass 需启用 @vitejs/plugin-vue-sass 插件。
你需要在 Laravel 11 项目里正确引入 CSS 文件，但发现以前在 Laravel 10 中能直接生效的写法现在报错、不加载或被拦截——这不是路径写错了，而是 Laravel 11 彻底移除了默认的 asset pipeline 集成机制，所有前端资源必须显式声明构建入口，且 public 目录下不再自动托管未构建文件。
资源目录结构与默认行为差异
在 Laravel 10 中，public/css/app.css 可以直接通过 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 引入，只要文件存在就生效；Laravel 11 默认不生成 public/css/ 目录，也不允许未经构建的 CSS 文件被 asset() 函数解析为可访问 URL。
执行 laravel new myapp --version=11 后，public/ 下只有 index.php 和 robots.txt，css/ 和 js/ 目录完全不存在——你不能手动创建它们再放文件进去，因为 Vite 的静态资源哈希机制会拒绝服务未注册的路径。
【必须先运行 npm run build 才有可访问的 CSS 资源】。Vite 构建后生成的文件（如 build/assets/app.[hash].css）会被自动注入到 public/build/，但该路径仅对 Vite 输出有效，不接受手写 CSS。
立即学习“前端免费学习笔记（深入）”；
Vite 配置方式变更
Laravel 11 将 Vite 配置从 vite.config.js 移至 bootstrap/app.php 的 withVite() 回调中统一管理，不再支持旧版多入口配置。
第一步：打开 bootstrap/app.php，找到 $app->withVite(...) 块；
第二步：确认传入的数组包含 'resources/css/app.css' 入口，例如：['resources/css/app.css', 'resources/js/app.js']；
第三步：若需额外 CSS 入口（如后台样式），必须显式添加，例如：['resources/css/app.css', 'resources/css/admin.css', 'resources/js/app.js']——漏加会导致 npm run build 不打包该文件，@vite 指令也无法注入对应 link 标签。
这一步操作起来很简单，直接把文件路径加进数组就行，但加错位置（比如写在 withMiddleware() 里）或拼写错误（如写成 resouces/）会导致整个 Vite 构建失败，且错误提示只显示 “Build failed”，不指明哪一行。
Blade 模板中引入语法升级
Laravel 11 废弃了 @viteReactRefresh 和手动 <script> 注入，强制使用统一的 @vite 指令，且支持按环境条件注入不同资源。
方法一：基础引入（开发 + 生产通用）@vite(['resources/css/app.css', 'resources/js/app.js'])
方法二：按环境动态引入（推荐用于分离前后台样式）
@if (request()->is('admin/*'))<br>
@vite(['resources/css/app.css', 'resources/css/admin.css', 'resources/js/admin.js'])<br>
@else<br>
@vite(['resources/css/app.css', 'resources/js/app.js'])<br>
@endif
【@vite 指令必须放在 <head> 内，且不能包裹在 @push('styles') 中】。Vite 的资源注入逻辑依赖 DOM 就绪时机，如果写在 @push 堆栈里，生成的 <link> 标签会被插入到页面底部，导致 CSS 加载延迟甚至样式闪烁。
自定义 CSS 处理链（PostCSS/Sass 支持）
Laravel 11 默认启用 PostCSS 8+，但移除了 Laravel Mix 兼容层，Sass 编译必须通过 Vite 插件显式启用。
第一步：安装插件：npm install -D @vitejs/plugin-vue-sfc @vitejs/plugin-vue-sass；
第二步：在 bootstrap/app.php 的 withVite() 回调中启用：$app->withVite(function (Vite $vite) { return $vite->useVueSass(); });；
第三步：将 resources/css/app.css 重命名为 resources/css/app.scss，并在其中使用 @import 'variables'; 等 Sass 语法；
第四步：运行 npm run build，Vite 会自动识别 .scss 后缀并调用 Sass 编译器——若跳过第二步，Vite 会直接报错 “Unknown language: scss”，而不是静默忽略。
