Multiple templates with different styles

Hi,

I'm having problems separating template-specific css/sass from each other.

app.blade.php

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta name="csrf-token" value="{{ csrf_token() }}">
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
        </div>
        
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Please note that the master page (app.blade.php) doesn't have an css imported. I want to do this on the two different template (login and backend).

Then I have a login-template. This is for login, signup, forgot password, etc.

<template>
    <div id="app-basic">
        <router-view></router-view>
    </div>
</template>

//<style src="logincss.css"></style>

and an app-template.

<template>
    <div id="theapp">
        <top-nav></top-nav>

        <router-view></router-view>

        <app-footer></app-footer>
    </div>
</template>

//<style src="theapp.css"></style>

How can I import template-specific styles?

Hope you understand.

mvd

8 years ago

Level 48

Hi Christiangerdes,

You can do this with yield and sections

app.blade.php

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta name="csrf-token" value="{{ csrf_token() }}">
    @yield('css', 'default_css_if_no_css_is_given.css')
    </head>
    <body>
        <div id="app">

<template>
    <div id="app-basic">
        <router-view></router-view>
    </div>
</template>

@section('css')
<style src="logincss.css"></style>
@endsection

christiangerdes

8 years ago

Level 16

Hi,

Sorry, but since I'm working with Vue in javascript all of the templates are written in javascript. I don't have access to Laravel's Blade engine...