标签: sveltekit

https://tailwindcss.com/docs/background-image#任意-values

这就是我想要使用 Tailwind bg-image 功能的方式。使用 SvelteKit next 160 和 Tailwind 3.0.9 时这不起作用。

代码：

<script>
  import globe from '$assets/bg/bg_globe2.png'
</script>

<div
    class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
  //children
</div>

该类bg-[right_-14rem_bottom_-10rem]工作没有问题，所以我认为 Tailwind 对 Svelte 文件路径有问题？

编辑：console.log(globe) 的输出是src/assets/bg/bg_globe2.png。

是否可以将 SvelteKit 项目构建为一个内联所有 JS 和 CSS 的输出 HTML 文件？SvelteKit 可以配置为支持这种输出格式还是我需要使用外部构建工具？

单个 HTML 文件输出是我项目的核心需求。我使用的是建立一个SvelteKit SPAssr: false和@sveltejs/adapter-static与fallback: 'index.html'配置。

我以前使用https://github.com/richardtallent/vite-plugin-singlefile通过简单的vite+svelte设置来完成此操作- 这非常有效。不过，我无法添加vite-plugin-singlefile到svelte.config.js维生素E的插件在我SvelteKit项目。

这是我尝试过的 SvelteKit 配置：

import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-static'
import { viteSingleFile } from 'vite-plugin-singlefile'

const config = {
    preprocess: preprocess(),
    kit: {
        target: '#svelte',
        adapter: adapter({ fallback: 'index.html' }),
        ssr: false,
        vite: {
            plugins: [viteSingleFile()],
            build: {
                target: 'es2019',
                assetsInlineLimit: 100000000,
                chunkSizeWarningLimit: 100000000, …

我刚刚在 sveltekit 应用程序中遇到了一个非常意外的错误，但我在网上找不到任何关于它的内容

我有一个普通的 sveltekit 应用程序，但它不是在导航到新页面时添加新代码，而是将新代码添加到旧代码之上，当我刷新页面时，它会删除旧代码（从上一页）

编辑：经过更多的探索后，我意识到它只发生在一个页面上，我的代码的哪一部分可以使这种情况发生？

我正在尝试在 sveltekit 中的两个页面之间进行转换，但这似乎不起作用，我该怎么做？

<!-- src/routes/asdf.svelte -->
<script>
  import { crossfade } from 'svelte/transition'
  const [send, receive] = crossfade({ })
</script>

<a href="/foo" in:receive={{ key: 'asdf' }} out:send={{ key: 'asdf' }}>Go to foo</a>

<!-- src/routes/foo.svelte -->
<script>
  import { crossfade } from 'svelte/transition'
  const [send, receive] = crossfade({})
</script>

<a href="/asdf" in:receive={{ key: 'asdf' }} out:send={{ key: 'asdf' }} style="background: crimson">Go to asdf</a>

我试图设置path路线何时更改，但它没有更新：

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

    function getPath() {
        path = $page.url.pathname;
        console.log(path);
    }

    $: $page.url.pathname;
    $: getPath();
</script>

<aside>
    <nav>
        <ul>
            <li class={path === '/' ? 'active' : ''}>
                <a href="/"><img src="/icons/compass.svg" alt="" border="0" />Dashboard</a>
            </li>
            <li class={path === '/messages' ? 'active' : ''}>
                <a href="/messages"><img src="/icons/messages.svg" alt="" border="0" /> Messages</a>
            </li>
        </ul>
    </nav>
</aside>

<style>
    nav li.active a {
        color: #fff;
    }
</style>

当我在浏览器中更改路线时，这不会更新。

错误：[vite]：Rollup 无法解析从“src/routes/random.svelte”导入“@/sample.js”。这很可能是无意的，因为它可能会在运行时破坏您的应用程序。如果您确实想外部化此模块，请显式地将其添加到build.rollupOptions.external

维特配置：

 plugins: [atomicPlugin(allAtomicCSSPaths)],
 resolve: {
   alias: {
  "@": path.resolve(__dirname, "./src"),
   },
},
 server: {
   fs: {
  allow: [".."],
  },
},

我有一个 sveltekit 应用程序，我想检查用户是否有 cookie 中的 accesstoken。我可以通过访问它event.request.headers.get('cookie');并将它们重定向到某个路径，但我无法从 sveltekit 文档中找到特定的语法。

src/hooks.ts

export async function handle({ event, resolve }) {

    const reqCookie = event.request.headers.get('cookie');
    const cookieName = 'userid';
    const keeperCookie = reqCookie.split(';')
        .find((c: string) => c.trim().startsWith(cookieName));

    const response = await resolve(event);

    if (!reqCookie || !keeperCookie) {
        return response.headers.set('location', '/create');
    }

    return response.headers.set('location', '/login');
}

重定向对我不起作用，并在控制台中给出错误

我对 sveltekit 和 svelte 不太熟悉，我正在尝试将数据从 API 加载到商店，这就是我的做法

    export const load = async ({ fetch }) => {
        const data = get(dataStore);

        if (browser && data) {
            return { status: 200 };
        }

        const res = await fetch('/data.json', { credentials: 'include', mode: 'cors' });
        const data = await res.json();

        if (browser) {
            dataStore.set(data);
        }

        return { status: res.status };
    };

我的问题是将 SSR 上的数据加载到 FE 存储的最佳方法是什么？

我正在使用 SvelteKit 构建一个应用程序并将其发布到 Cloudflare Pages，但我使用的一些包无法访问节点本机函数。这是构建日志：

2022-07-30T19:05:14.200499Z > Using @sveltejs/adapter-cloudflare\n2022-07-30T19:05:14.227308Z \xe2\x9c\x98 [ERROR] Could not resolve "url"\n2022-07-30T19:05:14.227701Z \n2022-07-30T19:05:14.227859Z     node_modules/sequelize/lib/sequelize.js:21:20:\n2022-07-30T19:05:14.228009Z       21 \xe2\x94\x82 const url = require("url");\n2022-07-30T19:05:14.22817Z           \xe2\x95\xb5                     ~~~~~\n2022-07-30T19:05:14.228388Z \n2022-07-30T19:05:14.228525Z   The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.\n2022-07-30T19:05:14.228694Z \n2022-07-30T19:05:14.22885Z  \xe2\x9c\x98 [ERROR] Could not resolve "path"\n2022-07-30T19:05:14.229004Z \n2022-07-30T19:05:14.229168Z     node_modules/sequelize/lib/sequelize.js:22:21:\n2022-07-30T19:05:14.22932Z        22 \xe2\x94\x82 const path = require("path");\n2022-07-30T19:05:14.229452Z          \xe2\x95\xb5                      ~~~~~~\n2022-07-30T19:05:14.229593Z \n2022-07-30T19:05:14.229733Z   The …

我正在一个可读存储中管理身份验证状态，该存储与一个承诺分组，该承诺在身份验证状态已知（登录或注销）时解析。该商店是通过内部设置的onAuthStateChange。

我正在尝试从服务器（+layout.server.ts和+page.server.ts）访问此身份验证状态，以便在未通过身份验证的情况下将用户重定向到登录页面，或者在（且仅当）经过身份验证时从数据库加载数据。无论我尝试什么，每当我从服务器访问此存储时，它的值始终为空。我认为这是因为 Firebase 只应该在客户端上运行，尽管我不确定。有什么方法可以从服务器访问此存储，或者更改我的实现，以便 Firebase 在服务器中运行并将身份验证状态传递给客户端？这篇博文几乎准确地解释了我想要做的事情，但这里的解决方案似乎比需要的更复杂。

我尝试将 Firebase 初始化代码移动到服务器（在 和 中hooks.server.ts）+layout.server.ts，但是我无法将 auth 对象传递给客户端，因为它无法序列化（当我尝试返回时，我收到一个错误解释这一点它来自 ) 中的加载函数+page.server.ts。我还尝试仅使用客户端代码处理身份验证，但服务器负责从数据库加载数据，因此在这种情况下，我无法从服务器验证有效的身份验证状态。