我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 的说明。我的目标是能够将单个组件（如按钮组件或卡片组件）导入到单个 svelte 组件中。此外，我希望能够利用 Bulma 提供的 sass 变量。
我已经寻找了一些关于如何做到这一点的教程，但我还没有找到任何东西。
有任何想法吗？
我对如何创建自定义元素 API 有疑问。我已按照文档进行操作，但收到以下警告：
生成自定义元素时使用 'tag' 选项。您是否忘记了 'customElement: true' 编译选项？(Link.svelte: 1:16)
我在编译器选项中标记了customElement: true。
我迷路了……有人可以帮助我吗？
我想每当“view.current”更改时重新渲染“Body”（我的 svelte 组件），以便它渲染相应的 .svelte 视图/组件：
应用程序.svelte
<script>
import Header from "./components/Header.svelte";
import Footer from "./components/Footer.svelte";
import Body from "./components/Body.svelte";
import Login from "./views/Login.svelte";
import Dashboard from "./views/Dashboard.svelte";
import { view } from "./store";
</script>
<Header />
<Body>
{#if view.current === view.login}
<Login />
{:else if view.current === view.dashboard}
<Dashboard />
{/if}
</Body>
<Footer />
在“Body.svelte”中，我只有一个可以设计样式的插槽
身材苗条
<div class="container">
<div class="content">
<slot></slot>
</div>
</div>
<style>
.container {
padding: 1em;
display: flex;
}
.content {
margin: auto;
}
</style>
在 Login.svelte （和其他 …
我正在学习 Svelte，我想在三个组件中使用来自一个 JSON API 的数据。数据如下：
{
"stats": {
"currentYear": {
"total": 6,
"success": 6
},
"thirty": {
"total": 30,
"success": 28
},
"hundred": {
"total": 100,
"success": 92
},
"allTime": {
"total": 789,
"success": 728
}
},
"heatmap": {
...
},
"other": {
...
}
}
我通过异步获取onMount在主组件中检索数据，这效果很好。App.svelte然后我想将每个对象传递给其相应的组件，因此该stats对象被传递给Stats.svelte，该heatmap对象传递给Heatmap.svelte等等。
为了说明我的问题，Stats.svelte我尝试显示每个时间段的百分比值，例如：
此外，每个 CSS 类将基于一些阈值来更改颜色（x >= 95：绿色，95 > x >= 90：黄色，x < 90：红色）。
因此，需要一些基本计算，我想在通用函数中使用这些计算，如下所示。 …
我正在尝试使用 Svelte 创建一个简单的反应式组件。该组件从 api 服务器加载数据onMount并更新响应值（更新 html 元素）。
我有一个简单的 vitest 来呈现组件并验证 html 元素的值。然而，在 vitest 下运行时，onMount永远不会调用 api ，因此永远不会进行 api 调用。我缺少什么？
Component.svelte：
<script>
import { onMount } from 'svelte';
export let name = 'world';
onMount(async () => {
console.log('chat onMount event!');
const response = await fetch('http://localhost:8081/api');
// for this example, assume name returned by api is FOO
name = data.name;
});
</script>
<div id="#element">
<b> Hello {name}</b>
</div>
index.test.js：
import { expect, test } from 'vitest';
import …我是新手，还没有完全了解绑定和更新。
我的组件应该在jobId属性每次更改时查询服务器，但是我似乎无法弄清楚该怎么做。
<script>
import StatusItem from './StatusItem.svelte';
import { getClient, query } from 'svelte-apollo';
import { client, JOBDETAIL } from '../data';
export let jobId;
let steps = query(client, { query: JOBDETAIL, variables: { id: jobId } })
</script>
<div class="steps">
{jobId}
{#await $steps}
Loading...
{:then result}
{#each result.data.history[0].details as step}
<StatusItem title={step.step} subtitle={step.time} status={step.status}/>
{/each}
{/await}
</div>
问题在于，它当然不会query在jobId更改时调用该函数，而我知道为什么不这样做。但是我不知道如何解决。我尝试使用，beforeUpdate但这似乎不正确
我正在试用 SveleteJS，但遇到了困难
制作了一个Dashboard组件，并在该组件内部放置了一个白板组件：
<script>
import Whiteboard from "./Whiteboard.svelte";
export let name;
</script>
<div class="box part-of-dashboard">
<Whiteboard lines={[]} />
</div>
Whitebord.svelte:
<script>
export let lines = [];
export function addLine() {
lines.push("blah");
console.log(lines);
}
</script>
<div style="background-color:red">
{#each lines as line}
<div>
{line}
</div>
{/each}
</div>
<div>
<button on:click={addLine}>
Add Line
</button>
</div>
当我单击按钮时，console.log触发器和我可以看到线条尺寸增加，但我没有看到它在页面上呈现，只有空的红色 div 包裹它。
我尝试过添加$:到不同的地方，但我还不确定在哪里应该使用它，在哪里不应该使用它，并不是说它有什么区别。
我如何让 #each 呈现 div 列表（而且，从 传递数据的正确方法是什么on:click，执行 {addLine('blah')} 在页面加载时执行该 addLine）？
我可以使用 Svelte 生成“初始”HTML 文件吗？
我正在使用 Django、Webpack 和 Tailwindcss。我想在我的前端中使用 Svelte，但我不想放弃仅使用服务器端渲染（Django 模板）带来的速度。如果我最初展示的是一个引导 HTML 页面，它引入了 bundle.js，并且 Svelte 在客户端构建了 DOM，那么浏览器仅在加载 JS 文件后才开始下载图像。
与最初呈现的 HTML 已包含图像链接相比，浏览器开始与 JS 一起下载它们，从而加快感知页面加载速度。
我不想使用 Sapper 作为我的应用程序服务器，我想继续使用 Django。
我有一个情况，我打开了两个选项卡
localhost:5000/，并且localhost:5000/stream想要更新路径中的变量并实时/查看路径中的变化。stream商店不是这样工作的，如果我将本地存储与商店一起使用，我stream只有在刷新页面后才能获取页面上的数据，这不是我需要的。有什么解决办法吗？
Svelte 中有没有办法添加仅影响当前组件和任何后代组件的样式？
\nSvelte 支持本机:global()选择器包装器，它将在全局范围内声明该选择器的样式，但我正在寻找类似的东西，它仅与当前或任何后代组件中的选择器匹配。
例如（REPL）：
\n应用程序.svelte
\n<script>\n import C1 from \'./C1.svelte\';\n let name = \'world\';\n</script>\n\n<div><C1>Hello {name}!</C1></div>\nC1.纤细
\n<script>\n import C2 from \'./C2.svelte\';\n let name = \'world\';\n</script>\n\n<style>\n :global(div) {\n padding: 10px;\n background-color: blue;\n }\n div {\n background-color: red;\n }\n</style>\n\n<div><C2><slot /></C2></div>\nC2.纤细
\n<div><slot /></div>\n在上面的示例中，所有三个组件都从中间子组件C1.svelte接收全局样式。我正在寻找一种方法来执行某种混合样式（不将样式传递给子组件）以添加仅影响组件树中向下的组件的“全局向下”样式。
\n当:global()不使用选择器包装器时，匹配的节点会被分配一个唯一的类，然后该类是选择器的目标，并在编译期间添加到选择器中。我的要求/建议是这样的：
:find(div) {\n background-color: blue;\n}\n\xe2\x80\xa6where:find()类似地为相同或降序组件中匹配的任何 HTML 元素分配一个唯一的类。这可能吗？
svelte ×10
svelte-component ×10
svelte-3 ×7
javascript ×6
bulma ×1
css ×1
materialize ×1
node.js ×1
sveltekit ×1
vitest ×1