Laravel: Dynamically add and remove CSS or Script

It is really easy to include all the common CSS or Script in the page. But the problem arise when you don't need some CSS or Script in the page. If you checkout my below code you will find out what i am trying to say.

I already instantiate my CSS class in header.blade.php and its included in the master.blade.php. After that index.blade.php extends master.blade.php

But the problem is When index.blade.php render it's create a new instance of the CSS class. header instance is gone.

I am trying to use my CSS Class

=> as service provider

=> share as view variable

=> as a Facade

CSS.php (myclass for add or remove css)

namespace App\AppGlobal;

class CSS {
    public $css = []; // all my css filename and path is store in here

    // add css
    public function add($path, $filename) {
        $path = asset($path);
        $this->css[$filename] = $path;

        return $this->css;
    }


    // remove css
    public function remove($filename) {
        if(array_key_exists($filename, $this->css)) {
            unset($this->css[$filename]);
        }
    }

    // print css
    public function print() {
        $output = '';
        if(count($this->css)) {
            foreach($this->css as $filename => $path) {
                $output .= "<link rel='stylesheet' href='{$path}/{$filename}'>\n";
            }
        }
        echo $output;
    }
}

master.blade.php (look like below)

{{-- include tha header --}}
@include('dashboard.inc.header')

{{-- the main content section --}}
@yield('main-content-section')

{{-- include tha footer --}}
@include('dashboard.inc.footer')

header.blade.php (look like below)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{config('app.name', 'ColorSpray')}}</title>

    {{-- add all common css --}}
    <?php $css->add('some/path', 'filename.css') ?>
    {{-- add additional css--}}
    @stack('add-css')
    {{-- remove exitsing css--}}
    @stack('remove-css')
    {{-- print all my css --}}
    <?php $css->print(); ?>
</head>
<body>

index.blade.php (index.blade.php extends master.blade.php)

@extends('dashboard.layouts.master')

@push('add-css')
    {{-- add any additional css for index page --}}
    <?php
        $css->add('your/path/name', 'filename.css');
    ?>

@endpush

@push('remove-css')
    {{-- remove any common css that i don't need in index page --}}
    <?php
        $css->remove('your/path/name', 'commonFilename.css');
    ?>
@endpush


@section('main-content-section')

@endsection


@section('script')
@endsection

chatty

7 years ago

Level 4

doesn't a browser cache those files?

Snapey

7 years ago

Level 122

you are making this way too complicated

if you want to include page specific css then add a yield in your master where you want it.

Then add an extra section to your page

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{config('app.name', 'ColorSpray')}}</title>

    {{-- include your master css file --}}

    @yield('page-css')

</head>
<body>

Then put the page specific css in your index page

@extends('dashboard.layouts.master')

@section('page-css')

    {{-- add any additional css for index page ==}}

@endsection


@section('main-content-section')

@endsection


@section('script')
@endsection

I dont understand why you woukd want to try and manage css using php files?

kundefine

7 years ago

Level 2

@SNAPEY - I know i can do that. But what if i don't need some master css file in pages. include is easy but how to exclude.

@extends('dashboard.layouts.master')

@section('page-css')

    {{-- add any additional css for index page ==}}

@endsection

@section('exclude-css')

    {{-- remove any css that comes from master layout ==}}

@endsection


@section('main-content-section')

@endsection


@section('script')
@endsection

Snapey

7 years ago

Best Answer

Level 122

a) does it really matter, stylesheets are i) cascading ii) cached by the client

b) if layouts are substantially different use a different master

If you change the content of the css file the best that might happen is that the client refetches it each time. The worse that can happen is that the browser does not notice that the css has changed

If you really want to peruse this,how about loading all css in a section and have nothing in the master

Please or to participate in this conversation.