如何从刀片模板调用本地 css 文件？

问题描述

从主父模板我尝试调用：

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

所以所有扩展父级的视图都可以使用这些样式但它不起作用。但是，如果我把它放在子视图中，效果很好。已经尝试使用 {{ }} 格式，并添加 type="text/css"。还检查了Including a css file in a blade template? 少了什么？？

编辑：更多细节... 我有这是AdminLTE页面模板（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

然后在视图中我有 @extends('adminlte::page') 引导程序和数据表等工作正常，但我的本地样式文件却没有。

更新：我将页面生成的 HTML 粘贴到此处。正如我写的，如果我把 'css' 部分放在视图中，它会生成这个 url，它在浏览器中工作：http://localhost:5555/css/admin_custom.css

如果我检查页面，我可以看到：

<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>

然后，如果我把它放在模板中，它不会产生相同的结果：

<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,600italic">    
        <link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
    
<style></style></head>

解决方法

adminLTE 模板的样式如果像以前那样写在 page.blade.php 中将不起作用：

编辑：更多详细信息...我有这是 AdminLTE 页面模板 (page.blade.php)

样式必须在 master.blade.php 中调用，以便可用于所有页面。 page.blade.php 也从 master 扩展，所以：转到 master.blade.php 搜索 {-- Base Stylesheets --}} 部分并将您的代码放在那里，如下所示：

 {{-- 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

注意：此修复适用于您尚未在 app.css 中编译所有样式且 AdminLTE 主页已按照此问题发布的情况。

正如 porloscerros Ψ 所写，你必须这样写（在 <head> 标签之间）

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

如果它不起作用，请尝试：

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

laravel laravel laravel-blade