jey/livewire-styleable

There is no license information available for the latest version (v1.0) of this package.

A package for defining scoped styles in Livewire components (Scss support)

v1.0 2022-03-16 12:06 UTC

Requires

• ext-dom: *
• ext-xml: *
• scssphp/scssphp: ^1.10

Unknown License

README

Installing:

composer require jey/livewire-styleable

Using:

In Component class:

<?php

namespace App\View\Component;

use App\Models\Post;
use Jey\LivewireStyleable\HasStyle;
use Livewire\Component;

class LatestPosts extends Component
{

    use HasStyle;

    public function render()
    {
        return view('components.latest-posts', [
            'posts' => Post::published()
                ->latest()
                ->take(3)
                ->get(),
        ]);
    }
}

In Blade template (latest-posts.blade.php):

<div>
    <div class="row">
        @foreach($posts as $post)
            <div class="col-xs-1 col-md-3 col-lg-4 mb-3">
                <div class="card">
                    <img src="{{ $post->image_url }}" alt="" class="card-img">
                    <div class="card-body" style="">
                        {{ $post->description }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
<style scoped lang="scss">
    .card {
        border-radius: 1rem;
        overflow: hidden;
        $card-color: red;
        .card-body {
            color: $card-color;
        }
    }
</style>

Module import support (Non-Webpack packages)

<style scoped lang="scss">
    @module('LatestPosts')
</style>