问题标签 [sapper]

我正在使用 Sapper 创建一个 Web 应用程序并希望使用相对字体大小。

我为body元素上的不同媒体查询设置了固定的字体大小。然后我想在 Svelte 组件的后续文本元素中使用rem单位font-size来调整视口的字体大小。

HTML（Svelte 组件）

CSS（Svelte 组件的）

Sapper 的全局 CSS

我希望本地组件 CSS 能够读取全局body元素上的字体大小，因此将字体大小调整h1为视口大小。但是，没有看到任何动作。相反，使用em单位效果很好。

如果我使用标准的 Sapper 入门程序：

我有“巨大的成功”。在我的 Svelte 应用程序中，我使用 rxfire 来查询我的数据库，所以有一个包含初始值的 RxJS BehviourSubject，一旦加载了数据库信息，它就会更新。这在 Svelte 中效果很好，但 Sapper SSR 版本会阻塞。

如果我按如下方式更改示例 Sapper 应用程序：

我明白了：

作为 Svelte 接管并正确渲染页面之前的初始渲染。

为什么我不能在 Sapper 中使用 BehviorSubject？

我在 sapper 模板中有一个带有分页的组件。目前，所有链接的行为都好像它们是相对于 root 的（localhost:3000/在这种情况下），无论 href 是在表单中page还是/page，（我什至尝试过./page。）

因此，对于我只想修改查询字符串的分页，我必须将当前视图的完整路径传递到 href 的组件中，这有点痛苦。是否有什么我做错了相关链接不起作用？（如果有办法让它们goto()直接调用就更好了，我有一个“转到页面：[x]”输入。）如果没有，是否有推荐的方法从组件内部获取当前路径，以便我可以抛出在分页组件中？

我遇到了与 Sapper 的路由和 Svelte 的转换有关的问题。

我创建了一个只有 2 页的小型 Sapper 网站。在主页上，我得到了一个轮播组件。它的每张幻灯片都有一个in:fade={{duration: 2000}}和一个out:fade={{duration: 2000, delay: 1000}}。

当页面第一次加载时没有过渡，这是完美的。

当我导航到 /contacts 时，问题就出现了，在我开始看到联系人页面之前，我必须等待 3 秒的淡出。转换完成后，我可以看到该页面。

这种行为正常吗？我能以某种方式避免它吗？我最终只使用了 CSS 过渡，但我更喜欢使用 svelte-transition :)

我正在尝试在 Sapper 中实现 firebase。我安装了模块（@firebase/app、@firebase/auth、@firebase/firestore），然后我编写了一个配置文件：

当我“npm run dev”时，我收到一条错误消息，指出这些 firebase 模块仅适用于客户端，不适用于 Node.js。

因此，我尝试以多种方式解决此问题，目前唯一可行的方法是使用 onMount。

现在它可以工作了，但我有 3 个问题：

1）这是正确的方法吗？2）我应该从服务器端删除这些模块还是更好地保留它们？3）我应该同时使用客户端和服务器端版本的firebase，并使用客户端一个来检索每个访问者和服务器端与所有共同数据不同的所有数据吗？

我有一个路由宠物/id，我正在尝试获取 id 并使用它获取我的 API 以获取单个宠物的信息。我怎样才能做到这一点？

我在 Sapper 文档中看到了 preload 函数，但显然这不是实现目标的正确方法，因为当我尝试打印我的宠物对象的属性时，我得到了未定义。

我不是前端开发人员，所以我希望我在这里使用正确的术语。

我在玩工兵。

我找到了一个免费的 jQuery，Bootstrap html 模板并将其迁移到 sapper。

我将一些代码段提取为组件并将所有资源放在静态文件夹下。实际上，每件事都运行良好。

问题是我的所有路线中都有一个重复的脚本标签。在我看来，有更好的方法来做到这一点。

请不要告诉我我不应该将 jQuery 与工兵一起使用。我下载了模板，我知道 jQuery 代码是用于视觉效果的。

我想在我的工兵项目中使用类属性和私有字段。显然它们现在必须由 babel 进行预处理。

我尝试在rollup.config.js中添加相应的babel插件，只是实现了一些东西。

1. babel rollup 插件只在 legacy 模式下使用。
2. 服务器部分根本不使用 babel。

我试图将 babel rollup 插件添加到这样的服务器插件的末尾，

但它似乎根本没有生效。

我还将它添加到客户端插件中（在遗留条目之前），但它抱怨我需要添加@babel/plugin-syntax-dynamic-import，所以看起来 babel 必须识别整个语法才能进行预处理，我真的不想编译动态导入对于现代浏览器。

如何在 sapper 中启用 esnext 语法？

我决定为我的下一个网站试用 Svelte，这将是一个使用 GitLab 页面托管的静态网站。

我得到了生成dist/bundle.js和dist/bundle.css.

问题是我无法上传此dist文件夹，因为没有index.html文件。

如何让 Svelte/rollup 生成index.html包含初始渲染的文件？

另一种选择是创建我自己的index.html文件并导入bundle.js. 这对我来说不是一个选项，因为初始渲染现在是在运行时通过 javascript 而不是在编译时生成的，可能会对 SEO 产生负面影响，并阻止没有 javascript 的用户至少看到一些东西。

我还在研究 Sapper，它进行服务器端渲染，据我所知，它在服务器端进行初始渲染。但是，这似乎需要您拥有服务器而不是渲染到文件，并且对于静态单页网站来说似乎过于复杂。

我正在使用Sapper和Svelte创建一个静态网站。

因为我的网站是静态的，所以我不会打扰服务器，而是使用该sapper export命令生成可以托管在 GitLab 页面上的静态文件。

因此，我已经删除了server.js我src目录中的文件 - 这应该没有必要。但是，当我运行导出命令时，它会失败并出现以下错误：

为什么要寻找服务器以及如何解决此问题？

我还尝试删除 中的server选项rollup.config.js，但是现在这抱怨client,server和serviceworker属性是必需的。