Amin Adel
Amin Adel

Reputation: 1028

how to compile scss styles inside a blade file

I'm trying to use scss styles inside a blade file. but I can't find a propper way to do that.

{{-- header.blade.php --}}
<header id="mainHeader">
    <style lang="scss">
        .a1 {
            color: red;

            > .a2 {
                font-size: 20px;
            }
        }
    </style>

    <div class="a1">
        this is a1

        <div class="a2">this is a2</div>
    </div>
</header>

is there any way to do this?

Upvotes: 0

Views: 2820

Answers (3)

Tomas Crofty
Tomas Crofty

Reputation: 187

I've been looking to do something similar to this and just wanted to give anyone in the future a point in the direction I took.

My use case was a little different, we run a bunch of different websites through a tenancy platform and wanted to utilise SCSS to make customisation of the templates easier.

We essentially use blade to create the scss plaintext, and then to compile we use a library called SCSSPHP (https://github.com/scssphp/scssphp/).

When somebody updates their settings on our system, we re-compile their scss for them.

Upvotes: 0

Anton Shumin
Anton Shumin

Reputation: 3

Sadly, it doesn't seem to be possible within blade. Vue uses the same setup, where self contained ui components hold html, js and css. Which makes for a very modular system if you plan it correctly.

Upvotes: 0

SergkeiM
SergkeiM

Reputation: 4168

there is no support for this, you can't compile SCSS from blade templates. Unless you write/use some sort of Plugin for laravel-mix.

In real is just the wrong way to go about it.

I would suggest using normal css in blade.

Upvotes: 1

Related Questions