问题标签 [svelte]

我正在使用 Svelte，我想创建一个允许我执行以下操作的组件：

CodeDisplay.html 应如下所示：

本质上，我想要的是一个组件，它首先呈现我放置在组件中的 HTML 代码，然后我想显示代码本身。（我正在构建一个文档系统。）

似乎您不能<slot></slot>多次使用，这是有道理的。

我将如何完成我在这里尝试的事情。对于文档中的每个示例，我真的想避免在我的代码中重复两次 HTML 代码。我只是觉得有一个组件会很好，一般来说，我可以传递一些 HTML，然后组件将呈现 HTML 并显示代码。

编辑：我刚刚意识到我可以做这样的事情：

并像这样显示它：

但是我遇到了一些错误（这种情况不一致）。

目前使用 Sapper 创建设计系统应用程序。

我有很多文件夹，它们通过路由文件夹创建应用程序。

文件夹结构如下所示：

这是我的design-foundations/interactions/buttons.html：

如果您要打开我的design-foundations/interactions/inputs.html文件或 下的任何其他文件design-foundations，您将看到一个看起来非常相似的文件，文件的底部导出Layout组件。

有什么方法可以避免我的文件中出现这种代码重复吗？

如果可能的话，我真的很想以某种方式避免每个文件末尾的标签。

我正在创建一个基本的棋盘，在我的 中data，我有一个棋子对象：

我想做的是只更新一个特定的片段，而不是创建一个新的片段对象并更新所有这些片段。所以我想做：

而不是：

有没有办法在 SvelteJS 中做到这一点？

So I have a Svelte component that looks like this:

My expectation is that the p tags should be red, but that's not what's happening. I'm using webpack to build the app and the relevant config for Svelte is:

The styles that are generated are:

I'm using Svelte 1.59.0 and svelte-loader 2.5.1. Any idea what's wrong here? I also see this behavior in the default Sapper app. The global CSS is actually in a global.css file and the :global styles don't seem to take.

当使用 {{{triple}}} 花括号语法从字符串输出原始 html 时，我在编译器的输出中看到几个 noscript 标记。

例如：

有谁知道为什么会呈现这些标签？

我正在构建一个使用纯 CSS 的仪表。它有一个背景，可以从显示中剪切剩余的进度颜色。我想在顶部添加另一个 div，它给出了进度的文本指示：“10%”。

似乎无论我做什么，我最终都会得到背景剪辑覆盖我的文本。

我在这里有一个问题的例子：

https://svelte.technology/repl?version=1.60.3&gist=77e1b55c23e229dee8d45b5648610593

我的代码的一个极其精简的版本，证明问题如下：

似乎 z-index: 0 仍然在我的文本 div （.gauge-bg-value）之上，即使我给它一个更高的索引。

更新 - 解决方案：

在构建我的示例时，我将文本移动到.gauge-capdiv 中，现在它位于顶部。也许是那个 div 一直覆盖它。很高兴听到不修改 html 结构的解决方案。

我正在尝试用 Sapper(sveltejs) 重写我的网站(Pug+Express)。我是 sveltejs 的初学者，如果我的问题可能真的很幼稚，请原谅。
我有一个 template.json 文件，其中包含我网站的所有静态数据。在 expressjs 版本中，我const template = require('template.json')使用 pug 模板渲染页面，如下所示

在 sveltejs/sapper 中实现这一目标的等效版本是什么？到目前为止，我做了一个import template from 'template.json'文件app/server.js。然后呢？由于sapper-template使用 polka 而不是 express，我很困惑如何正确使用它。有什么建议吗？

What would be the best way in svelte/sapper to do same thing as handlebars.js with-helper does. https://handlebarsjs.com/block_helpers.html Thank you!

在 Sapper 中进行这种延迟加载的最佳方法是什么：

1. 导航到包含图像的页面
2. 首先从src下载小图
3. 开始从 data-src 加载更大的版本，并在准备好后将其更改为 src
4. 导航到另一个页面
5. 回到图片页面，已经在那里加载了更大的图片

如果有人可以提供帮助，我会很高兴:)

也将其发布到 Svelte 存储库：

我刚刚在周末制作了我的第一个 Svelte 应用程序，并且非常喜欢这种体验。我很好奇的一件事是，我无法通过大量研究来弄清楚，是否/如何可以传递运行时环境变量或类似于客户端脚本，因此它可以在捆绑包中使用/浏览器。这可能不被认为是“最佳实践”，所以也许我只是一个人在这里，但在 Pug 中，您可以执行以下操作（例如来自 Hapi.js 路由处理程序）：

然后这些变量在 Pug 上下文中可用。

在我的玩具应用程序中，我希望能够在服务器启动时（从 a.env或 CLI）传递一个 api 密钥，并像这样从 Express 服务器注入它： app.use(express.static(`${__dirname}/public`)) 并让该 var 在客户端脚本中可用。同样，将 api 密钥注入客户端脚本并从那里进行调用可能不是最佳实践，但这种变量传递在 Svelte 中是否可行？

使用 rollup-plugin-inject 或 rollup-plugin-replace 似乎应该可以做到这一点，但我无法弄清楚如何做到这一点。这绝对不是对框架的批评，但也许有关使用 env vars 的部分将是对 Svelte 文档的有用补充。谢谢！