Laravel 烦人的 CSS 加载答案

【问题标题】：Laravel annoying css loadingLaravel 烦人的 CSS 加载
【发布时间】：2021-02-02 16:54:36
【问题描述】：

我正在开发一个托管在 apache 中的 laravel 博客。我使用 laravel mix 来编译我的资产（css、js）。当我去某个路线时，页面需要不到 1 秒的时间来为 css 充电：

经过的时间很短，但是很烦人。为什么会这样？我知道答案可能来自很多因素，我唯一想到的是在 laravel mix 中配置错误，但我的 js 和 css 资产只有几个代码。

例如，这也发生在我的主页（索引）上，它有一个非常简单的代码（菜单栏除外）。我的主页代码：

home.blade.php

<html>
    @extends('layout/layout')
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Blog</title>

    </head>

    <body>
        <div class="contenedor">
            @include('menu/menu-nav')
            <h1>Bienvenidos al Blog!</h1>

        </div>
    </body>
</html>

layout.blade.php

<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

menu-nav.blade.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@if(Auth::check())
    <a class="navbar-brand" href={{ route('editProfile')}}>
        {{ Auth::user()->username }}
    </a>
@endif

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href={{ route('home') }} >Home</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href={{ route('viewposts') }}>Blog</a>
        </li>

        @if(Auth::user())
            @if(Auth::user()->hasRole('creator'))
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Posts
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href={{ route('createpost') }}>Crear Post</a>
                    <a class="dropdown-item" href="#">Editar Post</a>
                </div>
            @endif
        @endif

        @if(Auth::user())
            @if(Auth::user()->hasRole('admin'))
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Administración
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="{{ route('viewusers') }}">Usuarios</a>
                    <a class="dropdown-item" href="#">Estadísticas</a>
                </div>
            @endif
        @endif

    </ul>

    @if(Auth::user())
        <span class="navbar-text">
            <a class="nav-link" href={{  route('logout') }}>Log out</a>
        </span>
    @else
        <span class="navbar-text">
            <a class="nav-link" href={{  route('register') }}>Registrarse</a>
        </span>

        <span class="navbar-text">
            <a class="nav-link" href={{  route('login') }}>Log in</a>
        </span>
    @endif
</div>

【问题讨论】：

标签： php html css laravel laravel-mix

【解决方案1】：

我建议您将 CSS 和 JS 标记放入 <head> 部分，如下所述：https://stackoverflow.com/a/18392465/14481105 浏览器会在 head 部分中查找这些文件。

我不确定您是否出于 Stack Overflow 的目的而忽略了它，但您还需要 <html> 标签和 <body> 标签。

【讨论】：

我更改了中的 CSS 和 JS，但它不起作用：/。另一方面，我在有问题的代码中省略了（已修复）。
您是否尝试过添加文档类型？上面的没有它，浏览器会以不同的方式呈现页面。
是的，我也这样做了：/，我尝试使用 chrome 更改浏览器（我使用的是 firefox）。 css 不加载，但时间减少，几乎察觉不到，但它仍然存在 :(