Laravel中为@include局部视图添加自定义CSS失败，如何解决？

在Laravel项目中，尝试为@include引入的header、footer等局部视图配置独立CSS文件，但始终无法生效。查阅官方文档得知使用stack和push是最佳方案，但发现它们在@include指令内似乎不生效。

相关文件代码如下：

布局文件：resources/views/layouts/app.blade.php #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Tutorial</title>
    
    <link rel="stylesheet" type="text/css" href="{{ url('assets/css/global.css') }}" />
    @yield('styles')
</head>
<body>
    @include('layouts.header')

    <main>
        hi
    </main>

    @include('layouts.footer')
</body>

</html>

局部视图：resources/views/layouts/header.blade.php #

@section('styles')
    <link href="{{ asset('assets/css/common.css') }}" rel="stylesheet">
@endsection

<header class="header">
    <nav class="header-nav">
        <ul class="pages">
            <li>
                <a href="/">Tutorial</a>
            </li>
        </ul>
        
        <ul class="auth">
            <li>
                <a href="/login">Login</a>
            </li>
            <li>
                <a href="/register">Register</a>
            </li>
        </ul>
    </nav>
</header>

局部视图：resources/views/layouts/footer.blade.php #

@section('styles')
    <link href="{{ asset('/assets/css/common.css') }}" rel="stylesheet">
@endsection

<footer class="footer">
    <nav class="footer-nav">
        <ul class="pages">
            <li>
                <a href="/">Tutorial</a>
            </li>
        </ul>
    </nav>
</footer>

最终CSS样式并未成功加载，寻求解决办法。

问题核心在于：@section和@yield的组合无法实现局部视图的资源注入。因为@include的局部视图是在布局的<body>部分渲染的，此时<head>里的@yield('styles')已经完成解析，后续的@section内容无法再被注入到<head>中。

正确的做法是使用Laravel的@push和@stack指令，这是为局部视图注入资源的标准方案：

步骤1：修改布局文件的<head>部分 #

将@yield('styles')替换为@stack('styles')：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Tutorial</title>
    
    <link rel="stylesheet" type="text/css" href="{{ url('assets/css/global.css') }}" />
    <!-- 用@stack替换@yield -->
    @stack('styles')
</head>
<body>
    @include('layouts.header')

    <main>
        hi
    </main>

    @include('layouts.footer')
</body>

</html>

步骤2：修改局部视图的资源注入代码 #

将@section改为@push('styles')，并添加@endpush闭合标签：

修改后的header.blade.php #

@push('styles')
    <link href="{{ asset('assets/css/common.css') }}" rel="stylesheet">
@endpush

<header class="header">
    <nav class="header-nav">
        <ul class="pages">
            <li>
                <a href="/">Tutorial</a>
            </li>
        </ul>
        
        <ul class="auth">
            <li>
                <a href="/login">Login</a>
            </li>
            <li>
                <a href="/register">Register</a>
            </li>
        </ul>
    </nav>
</header>

修改后的footer.blade.php #

@push('styles')
    <link href="{{ asset('/assets/css/common.css') }}" rel="stylesheet">
@endpush

<footer class="footer">
    <nav class="footer-nav">
        <ul class="pages">
            <li>
                <a href="/">Tutorial</a>
            </li>
        </ul>
    </nav>
</footer>

额外优化：避免重复加载资源 #

如果多个局部视图引入了同一个CSS文件（比如header和footer都加载了common.css），可以用@once指令包裹@push内容，确保资源只加载一次：

@once
    @push('styles')
        <link href="{{ asset('assets/css/common.css') }}" rel="stylesheet">
    @endpush
@endonce

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