小编Ehr*_*man的帖子

我刚刚开始使用 SvelteKit，我有一个关于函数的问题，该函数应该在每次路线更改时运行。我没有找到太多有用的信息。

只是为了在布局文件中运行它（我不喜欢这样做，因为我可能会使用多个布局文件并且更喜欢一个全局位置。）

在 Vue.js 中，我做了类似的事情，检查每个路由更改是否有访问令牌（在路由器文件的末尾）：

// src/router/index.ts
router.beforeEach((to, from, next) => {
  AUTHENTICATION.default.fetchAccessToken();
  if (to.options.protected && !AUTHENTICATION.default.tokenData) {
    next("/");
  } else next();
});

我如何在 SvelteKit 中实现这一目标？

这可以与SvelteKit 中的 svelte-routing 一起使用吗？ ...检查访问令牌通常是一个好主意吗？

先感谢您

设想

我只安装 vite，因为我的 nuxt 应用程序变得非常慢。热更换模块大约需要 10-30 秒。

但现在，我的顺风组件中的 sass 不再起作用了。

错误

[plugin:vite:css] Preprocessor dependency "sass" not found. Did you install it?

尽管如此，如果我每次点击删除浏览器中的 vite 消息：

require is not defined

但是安装了 sass-loader？！

修复步骤

• 重新安装顺风并安装
• 重新安装 sass-loader
• 安装 pug pug-plain-loader
• 安装 sass sass-loader@10 纤维

为什么 Tailwind 不能直接作用于 element？

这不起作用：

<template>
      <transition
        enter-class="opacity-0"
        enter-active-class="transition-opacity duration-300 ease-out"
        leave-class="opacity-0"
        leave-active-class="transition-opacity duration-300 ease-out"
      >
        Test
      </transition>
</template>

但是这个：

<template>
    <transition name="fade">
        Test
    </transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300 ease-out;
}
.fade-enter,
.fade-leave-active {
  @apply opacity-0;
}
</style>

我需要让它像“但是这个”一样工作，因为我将 Nuxt 与 vite 一起使用，并且我没有让 scss 工作，所以 @apply 不是一个选项。

谢谢。

我想动态导入组件而不导入特定组件。我想使用从商店收到的变量设置组件名称：

<script lang="ts">
    // SVELTE
    import { onMount } from 'svelte';

    // STORE
    import { dynamicComponent } from '$stores/dynamicTitle';


    $: $dynamicComponent;
    console.log($dynamicComponent)

    
    let renderDynamicComponent
    

    onMount(async () => {       
        const importValue = (await import(`../../lib/components/Home/DynamicComponents/${String($dynamicComponent)}.svelte`)).default;
        // const importValue = (await import(`../../lib/components/Home/DynamicComponents/IntroSectionCustom.svelte`)).default;
        renderDynamicComponent = importValue
    });

<svelte:component this={renderDynamicComponent}/>

但我得到：

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/lib/components/Home/DynamicComponents/Intro-Section-Custom.svelte

我不明白。从错误来看，这似乎是正确的路径......