SCSS global style not applying correctly on custom error page in SvelteKit

I’m encountering an issue with my SvelteKit project where global styles defined in my SCSS files are not being applied correctly to my custom svelte error page. Interestingly, the styles seem to apply only when hovering over a <a> button with href="/", but not with an empty href="" or other attributes.

Error Page Component (src/routes/+error.svelte):

<svelte:head>
    <title>{$page.status} • Example</title>
</svelte:head>

<main>
    <h1>{$page.status}</h1>
    <h2>{$page.error.message}</h2>
    <span>Page not found. It may have been removed, moved, or never existed.</span>
    <a href="/">Back to Home</a>
</main>

<script>
    import { page } from '$app/stores';
</script>

Vite Configuration (vite.config.js):

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],

    css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@use "./src/assets/scss/variables.scss" as *;',
          },
        },
      },
});

Here’s what I tried to resolve the issue:

1. Disabled HMR: Updated vite.config.js to disable Hot Module Replacement, but the issue persisted.

2. Imported manually global.scss: It worked, but when <a> is hovered, it reload global.scss again, even though it work, I don’t want it that way.

   import '../assets/scss/global.scss';
   

Expected Result:** I expected the global styles to be applied automatically across the entire page without relying on specific link attributes, hover actions or manual importing of the global style.

Actual Result: Styles are only applied correctly when hovering over a link with href="/". Styles do not apply with an empty href="" or with other link attributes.