标签: sapper

我在工兵模板中有一个带有分页的组件。目前，所有链接的行为都好像它们相对于根（localhost:3000/在本例中），无论 href 是否采用形式page或/page, （我什至尝试过./page。）

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

我正在尝试在 Sapper 中实现名为with-route-as-modal 的next.js示例中所做的操作。

它的作用是，当单击链接时，新页面会显示在模式中，而不是替换当前页面，并且 URL 会更新，反映当前的模式页面。它在多个社交网络中实施，例如 Instagram。

在next.js示例中，它是通过使用动态 href 来完成的，如下所示：

<Link href={`/?postId=${id}`} as={`/post/${id}`}>

我如何在 Sapper 中实现它？

谢谢你的时间。

我正在使用 Svelte/Sapper 编写服务器端渲染应用程序，但在使用 Font Awesome 字体时遇到问题。

我使用以下命令来加载字体：

<script>
  import Icon from "svelte-awesome";
  import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
</script>

<Icon data={faTimes} />

我看到的错误是：“不是有效的 SSR 组件。您可能需要检查构建配置以确保依赖项已编译，而不是作为预编译模块导入”

有针对这个的解决方法吗？

我正在尝试让 Winston 日志库与我的 Sapper 应用程序一起使用。该 Sapper 应用程序使用 Rollup 作为模块捆绑器。为了实现我的应用程序，我基本上遵循了以下步骤：

启动使用 Rollup 的新 Sapper 项目：

npx degit "sveltejs/sapper-template#rollup" my-app\n

通过安装 Winstonnpm install winston并在文件中添加自定义记录器工厂src/_logging.js：

npx degit "sveltejs/sapper-template#rollup" my-app\n

通过工厂获取记录器并在服务器路由中使用记录器src/routes/blog/_posts.js：

import { createLogger, transports, format } from \'winston\';\n\nexport function createLabeledLogger(label) {\n  return createLogger({\n    level: \'debug\',\n    transports: [new transports.Console()],\n    format: format.combine(\n      format.label({ label: label, message: true }),\n      format.splat(),\n      format.padLevels(),\n      format.simple(),\n    )\n  });\n\n}\n

这就像一个魅力：

\xe2\x9c\x94 service worker (16ms)\ndebug:    [posts-server] …

我来自React的背景，但是我要切换到Svelte和Sapper来开发我的下一个应用程序，以应对这些天React随附的庞大捆绑包规模。但是，我无法使用从localStorage检索的数据初始化Svelte的存储。

根据Sapper文档（https://sapper.svelte.dev/docs#Getting_started），我是通过npx degit "sveltejs/sapper-template#rollup" my-app从命令行运行来创建项目的。然后，我安装了依赖项，并删除了src文件夹中的演示代码。

然后，我创建了两个文件：src/routes/index.svelte和src/store/index.js。

两者的代码：

src / store / index.js

import {writable} from "svelte/store";

export let userLang;

if(typeof window !== "undefined") {
    userLang = writable(localStorage.getItem("lang") || "en");
} else {
    userLang = writable(null);
}

src / routes / index.svelte

<script>
    import {userLang} from "../store";
</script>

<p>Your Preferred Language: {$userLang}</p>

当我运行应用程序并点击index路由时，我看到以下内容：

您的首选语言：null

然后几乎立即更新并更改为

您的首选语言：zh

当langlocalStorage中没有项目时，更改为

您的首选语言：fr

在localStorage.setItem("lang", "fr")开发者控制台中明确设置并刷新之后。

我知道，这家店是在服务器上初始化第一地方window是undefined，然后在客户端上复水。因此，此行为是预期的。 …

使用以下代码：

<svelte:head>
    <script type='application/ld+json'>
    {
    "@context": "https://schema.org",
    "@type": "Organization",
    "url": "https://filestar.com",
    "logo": "https://filestar.com/logo-512.png"
    }
    </script>
</svelte:head>

在获得：

[svelte-preprocess] Error transforming 'ld+json'.

Message:
Cannot find module './transformers/ld+json'

Stack:
Error: Cannot find module './transformers/ld+json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Promise.resolve.then (C:\Repos\Filestar-Website\web-vnext\node_modules\svelte-preprocess\dist\utils.js:112:61)

我已经尝试了这个 github 线程中的建议，结果相同：https : //github.com/sveltejs/svelte/issues/2438

我试图弄清楚如何调试服务器端以对默认的 sapper 模板进行一些修改，我按照文档中的说明调试服务器端，并且 ndb 正确打开，但显示的唯一文件已加载gui 是 webpack.config.js 文件：

截屏

我还需要配置其他内容来调试 server.js 文件吗？

我的控制台中收到了一堆警告，提示“未使用的 CSS 选择器”来自其他文件的 css 或已删除的 css。它可能与https://github.com/sveltejs/sapper/issues/842有关，但现在我只是在寻找一种方法来防止未使用的 css 选择器警告出现在控制台中。

我尝试在 _layout.svelte 和 template.html 文件的顶部编写注释，如下所示：<!-- svelte-ignore css-unused-selector -->如下所示：https: //svelte.dev/docs#Comments，但它不起作用。我可以仔细检查并将其添加到每个文件中，但我想知道是否有一种方法可以使其适用于所有文件。谢谢。

我目前正在编写一个带有 svelte、sapper 和 tailwind 的应用程序。因此，为了让顺风工作，我已将其添加到我的汇总配置中

svelte({
        compilerOptions: {
          dev,
          hydratable: true,
        },
        preprocess: sveltePreprocess({
          sourceMap: dev,
          postcss: {
            plugins: [
              require("tailwindcss"),
              require("autoprefixer"),
              require("postcss-nesting"),
            ],
          },
        }),
        emitCss: true,
      })

总而言之，这些都是有效的，但我遇到了一些动态类名的问题。

写这样的东西似乎总是有效

  <div class={true ? 'class-a' : 'class-b'}>

两者class-a都class-b将包含在最终发出的 CSS 中，一切都按预期进行。

但是当我尝试添加变量类名时它不起作用。所以想象一下：

  <div class={`col-span-6`}>

它将完全按照预期工作，并且将从col-span-6tailwind 中的 css 类获得正确的样式。

但如果我把它改成这样：

  <div class={`col-span-${6}`}>

那么该样式将不会被包含在内。另一方面，如果我已经有一个带有该类的 DOM 元素col-span-6，那么样式将添加到这两个元素中。

所以我的猜测是编译器发现 css 没有被使用并且被删除了。我想我的问题是是否有任何方法可以强制顺风的所有造型？这样我就可以使用更动态的类名

不确定它是否相关，但我一直在测试它的组件有这个样式块

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

编辑：可以补充一点，我在日志中收到一堆打印，说有未使用的 css 选择器似乎与所有 tailwind 类匹配

注意：我已将我的 Sapper 应用程序迁移到 SvelteKit（下面的更新 3），因此现在正在寻找 SvelteKit 的解决方案。我有多个使用 Sapper 构建的 MFE（微前端），它们位于不同的服务器下。在一个 MFE 中有一个 svelte 组件（用于渲染 HTML 内容），我想在另一个 MFE 中调用/渲染它。我怎样才能做到这一点？我尝试同时在本地运行/服务两个 MFE 并执行了 fetch(route-that-loads-component)，但它在响应中返回 POJO，我不知道如何处理它：

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: Gunzip {
      _writeState: [Uint32Array],
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 5,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      bytesWritten: 0,
      _handle: [Zlib],
      _outBuffer: <Buffer 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 f7 7f 00 00 41 ff e2 55 …