laravel blade 内で scss を使うディレクティブ @scss

ずぼらなのでblade内でscssが使いたくなります。

使い方

blade内で @scss と @endscss で挟んだ領域で、scssをcssに変換してくれます。

hoge.blade.php

<style>
@scss
p{
  span{
     i{
        color:red;     
     }
  }
}
@endscss
</style>

設定方法

leafo/scssphpをインストール

ScssServiseProvider

app/Providers/ScssServiseProvider

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;

class ScssServiceProvider extends ServiceProvider
{
    public function boot()
    {
        require app_path('../vendor/leafo/scssphp/scss.inc.php');

        Blade::directive('scss', function ($expression) {
            return '<?php $__env->startComponent(\'components.scss\'); ?>';
        });

        Blade::directive('endscss', function ($expression) {
            return '<?php echo $__env->renderComponent(); ?>';
        });
    }

    public function register()
    {
        //
    }
}

config/app.php にProvider追加

config/app.php

    'providers' => [
    ...
    App\Providers\ScssServiceProvider::class,
    ...

scss.blade.php

resources/views/components.scss.blade.php

{!! (new scssc())->compile((string)$slot) !!}