Laravel @stack in component

Viewed 2749

I've created a tile component in my Laravel app, which is used on several pages to display/link to recipes (note: this is not an angular, vue or react component).

In my tile component I "push" a css file to a stack called styles:

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

In my head.blade.php the styles stack is outputted:

@stack('styles')

Every time my component is called/rendered, the tile.css file is added to my style stack. This works like a charm, my tiles are styled according to my tile.css file. The only problem is that the tile.css file is added to the styles stack multiple times.

Is there a way to prevent/check for double inserts in the styles stack, or do I have to manually add the tile.css file to every page/blade file on which the tile component is generated?

2 Answers

pushonce was introduced in Laravel 7.

@pushonce('styles')
  <link href="{{ mix('css/tile.css') }}" rel="stylesheet">
@endpush

I believe it's not possible but to be honest I don't see any point to use it.

In fact you usually create multiple SASS files which you concatenate into single file using Laravel mix, so you don't care which piece of CSS need on every subpage. You just have all CSS compiled into single file, so browser loads CSS once only and then use file from cache.

Related