Blade模板中根据引入页面条件加载Mix CSS样式

这需求太常见啦，咱用Laravel的Blade模板就能轻松实现「根据引入视图的不同，加载对应Mix编译CSS」的效果，给你两个实用的方案：

方案1：通过视图传参判断加载 #

这个方法直接明了——在引入header.blade.php时给它传个当前页面的标识，然后在header模板里根据这个标识判断要加载哪些样式。

步骤1：修改header.blade.php模板 #

在公共样式后加入条件判断，根据传入的page参数加载对应CSS：

<!-- 所有页面都加载的公共样式 -->
<link rel="stylesheet" href="{{ mix('/css/all.css') }}" />

<!-- 页面专属样式判断 -->
@if(isset($page))
    @switch($page)
        @case('dashboard')
            <link rel="stylesheet" href="{{ mix('/css/dashboard.css') }}" />
            @break
        @case('basic')
            <link rel="stylesheet" href="{{ mix('/css/basic.css') }}" />
            @break
        @case('advanced')
            <link rel="stylesheet" href="{{ mix('/css/advanced.css') }}" />
            @break
        @default
            <!-- index页面或未指定页面的默认样式 -->
            <link rel="stylesheet" href="{{ mix('/css/index.css') }}" />
    @endswitch
@endif

步骤2：在各个视图中引入header时传参 #

比如dashboard.blade.php里：

@include('header', ['page' => 'dashboard'])

<!-- 下面是dashboard页面的内容 -->

basic.blade.php里：

@include('header', ['page' => 'basic'])

<!-- basic页面内容 -->

方案2：利用Blade的@section/@yield实现（更优雅） #

这个方法更贴合Blade的模板继承思想——在header里留一个可填充的样式区块，让各个子视图自己定义要加载的专属CSS。

步骤1：修改header.blade.php模板 #

在公共样式后添加一个@yield区块：

<!-- 所有页面都加载的公共样式 -->
<link rel="stylesheet" href="{{ mix('/css/all.css') }}" />

<!-- 页面专属样式区块，由子视图填充 -->
@yield('custom-css')

步骤2：在各个子视图中填充专属样式 #

比如dashboard.blade.php里：

@extends('layouts.app') <!-- 假设你的主布局已包含header，可根据实际结构调整 -->

@section('custom-css')
    <link rel="stylesheet" href="{{ mix('/css/dashboard.css') }}" />
@endsection

<!-- dashboard页面内容 -->

如果是index.blade.php不需要额外样式，直接跳过@section即可，@yield会自动留空。

小提示 #

• mix()函数会自动处理CSS的版本号和哈希，能有效避免浏览器缓存问题，记得确保编译后的CSS路径正确。
• 如果页面数量较多，可以把判断逻辑抽成Blade组件，让代码更整洁易维护。

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