How to call local css file from blade template?

Question

From main parent template I tried calling:

<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >

So all views that extends parent can use these styles but it doesn't work. However if I put it in the child view, works perfectly. Already tried using the {{ }} format, and adding type="text/css". Also checked Including a css file in a blade template? What is missing??

EDIT: more details... I have this is the AdminLTE page template (page.blade.php):

@extends('adminlte::master')

@inject('layoutHelper', 'JeroenNoten\LaravelAdminLte\Helpers\LayoutHelper')

@if($layoutHelper->isLayoutTopnavEnabled())
    @php( $def_container_class = 'container' )
@else
    @php( $def_container_class = 'container-fluid' )
@endif

@section('includes')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
    <link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
@stop

@section('adminlte_css')
    @stack('css')
    @yield('css')
@stop

@section('classes_body', $layoutHelper->makeBodyClasses())

@section('body_data', $layoutHelper->makeBodyData())

@section('body')
    <div class="wrapper">

        {{-- Top Navbar --}}
        @if($layoutHelper->isLayoutTopnavEnabled())
            @include('adminlte::partials.navbar.navbar-layout-topnav')
        @else
            @include('adminlte::partials.navbar.navbar')
        @endif

        {{-- Left Main Sidebar --}}
        @if(!$layoutHelper->isLayoutTopnavEnabled())
            @include('adminlte::partials.sidebar.left-sidebar')
        @endif

        {{-- Content Wrapper --}}
        <div class="content-wrapper {{ config('adminlte.classes_content_wrapper') ?? '' }}">

            {{-- Content Header --}}
            <div class="content-header">
                <div class="{{ config('adminlte.classes_content_header') ?: $def_container_class }}">
                    @yield('content_header')
                </div>
            </div>

            {{-- Main Content --}}
            <div class="content">
                <div class="{{ config('adminlte.classes_content') ?: $def_container_class }}">
                    @yield('content')
                </div>
            </div>

        </div>

        {{-- Footer --}}
        @hasSection('footer')
            @include('adminlte::partials.footer.footer')
        @endif

        {{-- Right Control Sidebar --}}
        @if(config('adminlte.right_sidebar'))
            @include('adminlte::partials.sidebar.right-sidebar')
        @endif

    </div>
@stop

@section('adminlte_js')
    @stack('js')
    @yield('js')
@stop

Then In the view I have @extends('adminlte::page') And the bootstrap and datatables, etc. are working just fine, but my local styles file is not.

UPDATE: I paste here the HTML produced by the page. As I wrote if I put the in the 'css' section in view it produces this url, that works in the browser: http://localhost:5555/css/admin_custom.css

If I inspect the page I can see:

<head>    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T"> 
    
    
    <title>myTitle</title>    
        <link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
        <link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">      
        
        <link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    
        <link rel="stylesheet" href="http://localhost:5555/css/admin_custom.css">    
        <link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
    
<style></style></head>

Then, If I put it in the template it does not produces the same:

<head>
   
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
    
    
    <title>myTitle </title>      
    
        <link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
        <link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">        
        
        <link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">    
        <link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
    
<style></style></head>

Maybe because the quotes `href="{{ asset('css/admin_custom.css') }}"` — porloscerros Ψ, Jun 09 '21 at 21:33

score 1 · Answer 1 · answered Jun 10 '21 at 19:07

The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:

EDIT: more details... I have this is the AdminLTE page template (page.blade.php)

The styles have to be called in the master.blade.php so to be available for all pages. page.blade.php also extends from master, So: go to master.blade.php search for the {-- Base Stylesheets --}} section and put your code there like this:

 {{-- Base Stylesheets --}}
    @if(!config('adminlte.enabled_laravel_mix'))
        <link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
       
    <link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >

        {{-- Configured Stylesheets --}}
        @include('adminlte::plugins', ['type' => 'css'])

        <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    @else
        <link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
    @endif

Note: This fix is for case you have not compile all your styles in app.css and AdminLTE main pages have been published as in this question.

score 0 · Answer 2 · answered Jun 09 '21 at 23:48

0

As porloscerros Ψ wrote, you have to write it this way (in between <head> tags)

<link rel="stylesheet" href="{{ mix('css/admin_custom.css') }}">

And if it does not work, try:

<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">

answered Jun 09 '21 at 23:48

matiaslauriti

7,065
4
31
43

Second is the same, but when I tried mix, it said "Unable to locate Mix file: " File is there in public/css. So... – Laynier Piedra Jun 10 '21 at 12:47
So I add the route to the mix manifest { "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css", "/css/admin_custom.css": "/css/admin_custom.css" } and no more error, but still not loading styles. – Laynier Piedra Jun 10 '21 at 13:41
Are you compiling your css in the mix file ? See the final url when the HTML is ready and paste here that URL. Also, can you access that URL and see the CSS content ? – matiaslauriti Jun 10 '21 at 14:48
I tried npm run dev, wich executes laravel-mix but I don't think is is enough to compile the file I have to include it or import it in some configuration or something for mix to find it. Also I will update the question with the HTML you asked. – Laynier Piedra Jun 10 '21 at 15:43
I am not using mix right now... I have configured my admin template to do not: 'enabled_laravel_mix' => false, I will enable it if I get a good understanding. But that is not required for css file to be read by blade, right? – Laynier Piedra Jun 10 '21 at 15:56

How to call local css file from blade template?

2 Answers2