I'm new to laravel. I have two pages A and B which uses tables. Now in my layout.blade.php I have a link towards only one stylesheet which is affecting both the tables in A and B. I only want it in A and for B I have different set of stylesheet. How do I target the stylesheet to the pages?
4 Answers
You can load css files directly in these views, so A would load one css and B will load another one.
Another way if to use conditional loading in layout.blade.php:
@if (request()->is('pageA'))
// Load CSS for A
@elseif (request()->is('pageB'))
// Load CSS for B
@endif
1 Comment
Goldensquare
@extends('layout') <link rel="stylesheet" href="/css/Astyle.css"> @section('content') and for b page @extends('layout') <link rel="stylesheet" href="/css/Bstyle.css"> @section('content')
Usually in this case you should have a master layout that only include global scripts and stylesheets, says layouts/global.blade.php
<!doctype html>
<html lang="en-US">
<head>
<title>Your website</title>
@section('meta')
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@show
@section('stylesheets')
<link rel="shortcut icon" href="{{asset("favicon.ico")}}" type="image/x-icon"/>
<link type="text/css" rel="stylesheet" href="{{asset("css/global.css")}}"/>
@show
@section('scripts')
<script src="{{url("js/global.js")}}"></script>
@show
</head>
<body>
@yield('content')
</body>
</html>
Then in your page_a.blade.php, you extend it and include your own specific stylesheets:
@extends('layouts/global')
@section('stylesheets')
@parent
<link type="text/css" rel="stylesheet" href="{{url("css/page_a.css")}}"/>
@endsection
@section('scripts')
@parent
<script src="{{url("js/page_a.js")}}"></script>
@endsection
@section('content')
Your page A content
@endsection
Comments
I think you may create a section like the following in your view, for example:
@extends('layouts.master')
@section('styles')
<link href="{{asset('assets/css/custom-style.css')}}" />
@stop
Hope this helps you.
answered Dec 29, 2016 at 7:22
AddWeb Solution Pvt Ltd
21.8k5 gold badges30 silver badges61 bronze badges
Comments
You can use sass css for that conditions. In that sass css you can use if and else condition and check variable. Please refer below link for how to use it.
bladeor set a variable for to identify the page andlinkthe stylesheet accordingly.