SCSSをBlade内でつかってみる

WEB制作
SCSSをBlade内でつかってみる

完全にブログ更新を怠っていましたどうもこんにちは塚本です！

今日のブログはタイトルの通りです。
なんでスタイル適用されないんやろ？クラスをタイポしてる？
とか思いながらよく見てみると、SCSSをblade内に書いてたことがきっかけです。

目次

laravel-scss

laravel-scssを使用することで、
blade内でSCSSをつかうことができます。

<style>
    @scss
        #menu {
            .item {
                &.active {
                    background-color: red;
                }
            }
        }
    @endscss
</style>

構文はこんな感じで、@scssと@endscssでSCSSを挟めばOKです。
実際にコンパイルされたCSSは<body>直下に配置されます。

Install

Get the Package

composer require pawlox/laravel-scss

Register the Service Provider

次にconfigフォルダのapp.phpのprovidersへ追記してください。

'providers' => [
    ...
    Pawlox\LaravelScss\LaravelScssProvider::class
]