Laravel 10单个Blade文件@extend/@section样式失效求助

问题描述 #

Laravel 10项目中，pages.areaparkir.create.blade.php文件通过@extend('layouts.app')继承布局并使用@section('content')填充内容，但页面CSS样式完全无法加载；项目内其他采用相同结构的Blade文件样式加载正常。

已尝试的操作 #

• 确认CSS资源路径无误（其他页面样式正常可佐证）
• 将正常加载样式的Blade代码完整复制到问题文件，问题仍存在
• 执行php artisan optimize清除框架缓存
• 手动清理Chrome缓存并更换Edge浏览器测试
• 修改路由规则，未解决问题

环境信息 #

• Laravel版本：10
• PHP版本：8.1.9
• 本地服务器：Laragon

相关代码 #

控制器代码 #

public function create()
{
    return view('pages.areaparkir.create');
}

路由代码 #

Route::get('/area-parkir/create', [AreaParkirController::class, 'create'])->name('areaparkir.create'); 

问题Blade文件核心代码 #

@extends('layouts.app')

@section('content')
    <main role="main" class="main-content">
        <!-- 页面主体内容 -->
    </main>
@endsection

跳转按钮代码 #

<div class="col ml-auto">
    <div class="dropdown float-right">
        <a href="{{ route('areaparkir.create') }}">
        <button class="btn btn-primary float-right ml-3" type="button">
                                                        Tambah Area
                                                        Parkir +
        </button></a>
    </div>
</div>

排查建议 #

1. 检查布局文件的CSS引用方式 #

确认layouts.app中CSS资源使用绝对路径生成方法，避免相对路径导致二级路由下资源请求错误：

• Vite（Laravel 9+默认）正确写法：

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  

• 传统asset()写法：

  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  

如果使用相对路径（如css/app.css），访问/area-parkir/create时浏览器会请求/area-parkir/css/app.css，导致404。

2. 查看浏览器控制台的网络请求 #

打开Chrome开发者工具（F12）→「网络」面板，刷新页面后检查CSS资源的请求状态：

• 若为404：确认CSS文件实际路径与请求路径一致，使用Vite时需确保已执行npm run dev或npm run build
• 若加载被阻止：检查是否有浏览器插件（如广告拦截器）或CSP策略阻止资源加载

3. 排查Blade语法隐性错误 #

即使页面能渲染，隐性语法错误可能导致布局文件的CSS部分未正确输出：

• 检查问题文件中是否有未闭合的@if、@foreach等指令
• 确认@extends、@section、@endsection拼写正确且结构完整
• 尝试只保留用户提供的核心Blade代码，逐步添加内容排查问题点

4. 检查控制器输出 #

确认create方法未输出额外内容（如echo、var_dump），这些内容会破坏HTML结构导致CSS无法解析：

// 测试渲染后的HTML是否完整
public function create()
{
    dd(view('pages.areaparkir.create')->render());
}

5. 清除视图缓存 #

单独清除视图缓存，强制重新编译：

php artisan view:clear

也可直接删除storage/framework/views目录下的所有文件。

6. 检查Laragon虚拟主机配置 #

确认Laragon虚拟主机正确指向项目的public目录，避免路径解析错误；尝试重启Laragon服务器。

内容的提问来源于stack exchange，提问作者GigaTera