I accidentally noticed that my website is loading the same CSS file twice.
I use Laravel with Inertia, Vue, and Vite.
This cache postfix: 23c49378, is appearing twice
If I look In the networks tab, it is only appears once, which means it's only fetched once, which is good, however... if I look at elements, they have the same styles applied twice.
This is my app.blade.php file:
<!DOCTYPE html>
<html lang="">
@if(Route::is('admin.*'))
@php($__inertiaSsrDispatched = true)
@php($__inertiaSsrResponse = null)
@endif
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="" />
<meta name="msapplication-TileColor" content="#2b5797">
<link rel="canonical" href="" />
@if(Route::current())
<link rel="alternate" hreflang="x-default" href="" />
@if(isset($locales) && Route::current() !== null)
@foreach($locales as $locale)
<link rel="alternate" hreflang="" href="" />
@endforeach
@endif
@endif
<!-- Scripts -->
@routes(nonce: Vite::cspNonce())
@if(Route::is('admin.*'))
@vite(['resources/js/admin.ts', "resources/js/Pages/{$page['component']}.vue"])
@else
@vite(['resources/js/app.ts', "resources/js/Pages/App/{$page['component']}.vue"])
@endif
@inertiaHead
<!-- Global site tag (gtag.js) - Google Analytics -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-SDK4391YJ7" defer async nonce=""></script>
<script defer nonce="">
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SDK4391YJ7');
</script>
</head>
<body class="font-sans overflow-y-scroll antialiased @if(Cookie::get('theme') === 'dark') dark @endif @if (Cookie::get('expansion') == 'deflated') @endif bg-white dark:bg-black">
@inertia
</body>
</html>
This is my app.ts:
import './bootstrap';
import '../css/app.css';
import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {io} from 'socket.io-client';
import {Ziggy} from './ziggy';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
createInertiaApp({
title: (title) => `${title}`,
// @ts-ignore
resolve: (name) => resolvePageComponent(`./Pages/App/${name}.vue`, import.meta.glob('./Pages/App/**/*.vue')),
// @ts-ignore
setup({ el, app, props, plugin }) {
//const application = createSSRApp({ render: () => h(app, props) })
const application = createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el)
return application;
},
})
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './resources/js'),
'@ziggy': path.resolve(__dirname, './resources/js/ziggy')
},
},
plugins: [
laravel({
input: {
main: 'resources/js/app.ts',
admin: 'resources/js/admin.ts',
},
ssr: 'resources/js/ssr.ts',
refresh: true,
}),
vue({
reactivityTransform: true,
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
ssr: {
noExternal: [
'@inertiajs/server'
],
},
});
Im a bit confused as to where to start... it looks like its being done as part of the inertia insertions?
from My Application is Loading CSS files twice?
No comments:
Post a Comment