SvelteKit组件引入外部CSS文件失效，内联样式正常

问题重现 #

在SvelteKit组件中使用<svelte:head>里的link标签引入外部CSS文件时样式不生效，但内联样式正常。原代码如下：

<svelte:head>
<link href="../style/index.css">
</svelte:head>
<h1>Welcome to your library project</h1>
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

解决步骤 #

1. 修正路径并添加必填属性 #

• SvelteKit中，<svelte:head>内的link路径是相对于项目根目录的public文件夹，而非组件所在目录。如果你的index.css放在public/style/下，路径需改为/style/index.css。
• 必须添加rel="stylesheet"属性，浏览器依赖该属性识别样式表文件，缺失会导致样式无法加载。

修改后的代码：

<svelte:head>
<link href="/style/index.css" rel="stylesheet">
</svelte:head>
<h1>Welcome to your library project</h1>
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

2. 使用组件内import引入（推荐） #

更符合SvelteKit组件化规范的方式是直接在组件脚本中import CSS文件，路径相对于组件所在位置：

<script>
  import '../style/index.css'; // 根据实际文件位置调整路径
</script>

<h1>Welcome to your library project</h1>
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

3. 全局样式引入（适用于全项目生效的样式） #

如果是全局通用样式，可在src/routes/+layout.svelte中引入，所有页面都会自动加载该样式：

<script>
  import '../style/index.css';
</script>

<slot />

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