Laravel11和10引入CSS方式有啥不一样-php教程-PHP中文网

laravel 11 中 css 必须通过 vite 显式声明入口并构建，不可直接用 asset() 引入未构建文件；需在 bootstrap/app.php 的 withvite() 中添加 css 路径（如 'resources/css/app.css'），blade 中用 @vite(['...']) 在 head 内引入，且支持 sass 需启用 @vitejs/plugin-vue-sass 插件。

laravel11和10引入css方式有啥不一样

你需要在 Laravel 11 项目里正确引入 CSS 文件，但发现以前在 Laravel 10 中能直接生效的写法现在报错、不加载或被拦截——这不是路径写错了，而是 Laravel 11 彻底移除了默认的 asset pipeline 集成机制，所有前端资源必须显式声明构建入口，且 public 目录下不再自动托管未构建文件。

资源目录结构与默认行为差异

在 Laravel 10 中，public/css/app.css 可以直接通过 <link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D"> 引入，只要文件存在就生效；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”，不指明哪一行。

laravel-specialist

精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载

Blade 模板中引入语法升级

Laravel 11 废弃了 @viteReactRefresh 和手动 <script></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 指令必须放在内，且不能包裹在 @push('styles') 中】。Vite 的资源注入逻辑依赖 DOM 就绪时机，如果写在 @push 堆栈里，生成的 <link> 标签会被插入到页面底部，导致 CSS 加载延迟甚至样式闪烁。