У меня есть приложение Laravel, которое использует немного кода Vue в шаблонах блейдов. Возникает проблема с переходом от представления к представлению, почти каждый раз, когда возникает небольшая задержка перед загрузкой CSS, когда необработанный текст страницы отображается без какого-либо форматирования. Он отображается около 1/2 секунды, а затем срабатывает CSS, и он выглядит правильно. Я не могу найти причину этого, я пытался изменить микс ('css/app.css') и т. д., чтобы не приходилось каждый раз перезагружать его, но я не могу понять, как это исправить.
Я не уверен, что Vue как-то задерживает загрузку css? Есть идеи что это может быть? Я вставлю верхнюю часть шаблона лезвия ниже. Я только что обновился до Laravel 8, но то же самое происходило и с Laravel 7.
Спасибо за вашу помощь!
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
@hasSection('style')
@yield('style')
@endif
<!-- Scripts -->
@hasSection('script')
@yield('script')
@else
<script>
var vmMixinsAdmin = '';
</script>
@endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc