在 sveltekit 中为每个路由加载外部 javascript/css

Question

如何仅为特定路线加载 javascript/css 文件，例如/form ？

我可以将它们添加到<head>下的app.html中并且可以正常工作，但这会导致这些 javascript 不必要地加载到所有路由中。

我尝试使用svelt:head将它们放在相应路由的 svelte 文件下，如下所示：

<svelte:head>
    <link rel="stylesheet" href="external.css" />
    <script src="external.js"></script>
</svelte:head>

只有当我们像localhost:3000/form那样直接加载/刷新路由时，这才会加载使 js/css 文件按预期加载。 但是，如果我从主页导航到/form路线，将无法正常工作。 似乎 Sveltekit 在我们导航时不会重新渲染<head> 。

知道怎么做吗？

Answer 1

我无法确认这种行为。 svelte:head在组件安装和销毁时动态添加和删除<head>中的项目。 无论是否发生硬重新加载或导航，都会发生这种情况。

您检查此问题的方式已关闭，或者这曾经是一个问题，并且您使用的是过时的 SvelteKit 版本。

Answer 2

我认为最好直接在您的路线形式中编写您的样式和脚本，如下所示：

<script>
// here you put your script, you can use method onMount if it is necessary
</script>

<form>
<!-- here you put form code -->
</form>

<style>
//here you put your personnal css 
</style>

通常在 Svelte 中，默认情况下样式是限定范围的，这意味着如果您编写 CSS，它具有此特定路由的 id，因此即使您在另一个路由中使用相同的类，它也不会影响该类。 这里有一个文档中的示例。 这里有一篇非常好的 CSS-Tricks 文章。

在 sveltekit 中为每个路由加载外部 javascript/css

问题描述

2 个解决方案

解决方案1
0 2022-07-18 08:20:36

解决方案2
0 2022-07-18 10:42:09

在 sveltekit 中为每个路由加载外部 javascript/css

问题描述

2 个解决方案

解决方案1 0 2022-07-18 08:20:36

解决方案2 0 2022-07-18 10:42:09

解决方案1
0 2022-07-18 08:20:36

解决方案2
0 2022-07-18 10:42:09