问题标签 [svelte-component]

我有 3 个苗条的组件。比较应用程序，它导入比较一和比较二。两个如何在一个中调用一个函数？

我想- mywebsite在每个 Svelte 页面上添加一个标题后缀。

我正在努力寻找如何轻松简单地做到这一点。

在 svelte 网站源代码上，我们可以看到他们手动执行此操作：https ://github.com/sveltejs/svelte/blob/1273f978084aaf4d7c697b2fb456314839c3c90d/site/src/routes/docs/index.svelte#L15

我开始创建这样的组件：

但：

• 我有一个<title> can only contain text and {tags}svelte(illegal-structure)错误
• 我不确定这是最简单的方法。

如何实现我想做的事情？

嗨，互联网上的好人，

我为用户的滚动位置创建了一个侦听器： <svelte:window bind:scrollY={y} /> 我想将此变量保存在商店中，以使其在整个网站上都可以访问。但为此，我需要一个二传手。有没有一种好的高性能方法来做到这一点？

我试过这个，但它不起作用：

我正在使用 Svelte 和 Tailwindcss 开展一个项目。我使用 Webpack 作为我的捆绑包。我显然使用 postcss 和 purgess 来减小我的 css 的大小。

在开发模式下，我不清除任何东西，它工作得很好，但是当我想构建项目时，一切都会中断。

我在模板工作中直接使用的顺风类，它们最终出现在最终的 css 包中。我在里面写的自定义 css 被清除了。

postcss.config.js

webpack.common.js

webpack.production.js

例子.svelte

在此示例h-48 flex flex-col items-center中正确输出和应用。但text-gray-200 font-bold uppercase text-2xl antialiased不是。

我尝试过使用svelte-preprocess-postcss和其他东西，但我或多或少地调整了一些东西，却不知道我在做什么。

我有多个文件命名相同，但来自完全不同的位置。这是一个简化的示例：

我尝试从同一个文件中将它们全部导入，如下所示：

即使我将它们作为不同的名称导入，它们都引用最后导入的那个。经过调查，看起来这是因为 svelte 将类名设置为文件名，无论路径如何，例如：

它们都是相同的，所以当它们被导入时，它们都会覆盖上面的那个。

所以我的问题是：如何在不更改文件名的情况下修复这种冲突？当然有一种方法可以更改组件的类名，我只是在文档中找不到它。

如果没有办法解决它，那么 svelte 如何处理人们经常重复使用常用名称的事实，比如utilsor index？

我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 中的说明。我的目标是能够将单个组件（如按钮组件或卡片组件）导入单个苗条组件。此外，我希望能够利用 Bulma 提供的 sass 变量。

我已经寻找了一些关于如何做到这一点的教程，但我还没有找到任何东西。

有任何想法吗？

• 语境

在我的 Svelte 应用程序中，我有多个页面，每个页面显示一个或多个视频。为了渲染视频，我重用了一个视频组件（简化）：

主页面通过api接收视频内容并调用视频组件：

一切正常，视频已渲染并可播放。

• 问题

但是：当我导航或想用另一个视频替换视频时，旧的视频元素仍然存在并且播放继续。

我可以beforeUpdate()用来暂停视频。但是，奇怪的是，新视频是在完全相同的播放时间加载的，一切都搞混了。或者，如果我删除 中的视频元素beforeUpdate()，它不会填充新信息。

这有点道理，因为video媒体元素保持完全相同，而只有属性和内容发生变化。因此状态和已经缓冲的源仍然存在。

我需要以某种方式确保，当数据更改时，必须完全重新安装视频组件。 有谁知道这是怎么做到的吗？谢谢！

是否有更简单的方法来编写以下复选框组件：

拥有<label disabled="false">是不可接受的，因为 Bulma 有一个 CSS 类.checkbox[disabled]。

我通过转换我现有的（证明概念）国际象棋自定义元素/WebComponent 来学习 Svelte。

一个目标是突出显示拖动棋子可以移动到的方格

在我的自定义元素中，使用样式表相当容易（在 Board shadowDOM 内！！！）

然后正方形上的鼠标指针创建具有正确正方形名称的 CSS
（对于屏幕截图：局部变量at='D5'和piece='black-knight'）

无需遍历先前的方块来清理类名，
无需再次遍历方块来设置类名

但我正在学习 Svelte...

一切都是 Svelte 对象：Board、Square、Piece（Square 内）

一个页面上可以有多个板，
因为没有 shadowDOM，应用我的 CSS 方法：

• 我需要获取svelte-xxxxx一个板的类名（更简单的方法是什么？）
• 然后使用需要的 className<STYLE>为每个板创建一个（全局）元素svelte-xxxxx

但我想知道是否有一种更（反应性）的 Svelte 方式来创建它？

我想使用跨组件的多个实例共享的代码来启动每个组件内的代码。

我尝试使用反应式语句来做到这一点：

但是更改what不会触发该反应性语句的重新运行。

为什么这个 REPL 不起作用，我该如何解决？

https://svelte.dev/repl/38b94490982f4f3c80644fd364b50723?version=3.16.0