SvelteKit自定义错误页SCSS全局样式异常问题求助

在SvelteKit项目中，自定义错误页src/routes/+error.svelte无法正常加载全局SCSS样式，仅当鼠标悬停在href="/"的<a>标签上时样式才会生效，使用空href=""或其他链接属性的标签则无效果。

相关代码 #

错误页组件（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配置文件（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 *;',
          },
        },
      },
});

已尝试的解决方法 #

• 禁用HMR：修改vite.config.js关闭热模块替换，问题未解决
• 手动引入global.scss：样式生效，但鼠标悬停<a>标签时会重新加载样式文件，不符合预期

解决方案 #

1. 在根布局中明确引入全局样式 #

SvelteKit的错误页默认嵌套在根布局src/routes/+layout.svelte中，全局样式需在此布局中引入才能被所有页面（包括错误页）继承。在+layout.svelte中添加：

<!-- 方式1：通过style标签引入 -->
<style lang="scss">
    @use "./assets/scss/global.scss";
</style>

<!-- 方式2：通过script标签导入 -->
<script>
    import './assets/scss/global.scss';
</script>

<slot />

确保根布局中存在<slot />，保证错误页内容能正确渲染到布局上下文里。

2. 修正Vite配置中的路径别名 #

Vite的additionalData中使用相对路径可能导致解析问题，建议配置路径别名优化路径引用：

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

export default defineConfig({
    plugins: [sveltekit()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@use "@/assets/scss/variables.scss" as *;',
          },
        },
      },
});

问题原因分析 #

悬停href="/"时样式生效，是因为该操作触发了客户端导航，加载了首页的资源包（包含全局样式），而错误页本身在初始渲染时未正确加载全局样式资源。通过根布局统一引入全局样式，能确保所有页面（包括错误页）在初始化时就加载样式。

内容的提问来源于stack exchange，提问作者diaburobr