如何让two -in-js/ wind插件在Svelte中工作

Question

我在Svelte中使用two -in-js/wind。当使用香草设置为苗条的应用程序和包括风之后，我找不到任何方法让插件工作:

<script>
import {tw, apply, setup} from 'twind/css';
setup ({
plugins: {
h1style: apply`
uppercase
text-6xl
font-thin
`,
},
});
const h1style2 = apply `uppercase text-6xl font-thin`;
export let name;
</script>
<main>
<h1 class={tw`h1style`}>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial" class={tw`italic`}>Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

在上面的代码示例中，h1style2 (const声明)工作，但插件h1style没有。

如果有人能让这个工作，我将不胜感激。

Answer 1

我在Svelte Repl中尝试了您的示例，它似乎有效:https://svelte.dev/repl/e153da51e31a4b6c90cce63d9b6b3194?version=3.31.2

在这里您可以找到我们的示例苗条项目:https://github.com/tw-in-js/example-svelte

需要注意的一点是，setup应该在应用程序初始化器中的组件之外，或者在<script context="module">中。这确保了setup在每个应用程序中只被调用一次。