如何解决如何让 tw-in-js/twind 插件在 Svelte 中工作
我在 Svelte 中使用 tw-in-js/twind。 当为 Svelte App 使用 vanilla 设置时,在包含 Twind 之后,我找不到任何让插件工作的方法:
<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 无效。
我很高兴知道是否有人能让它工作。
解决方法
我在 Svelte Repl 中尝试了您的示例,它似乎有效:https://svelte.dev/repl/e153da51e31a4b6c90cce63d9b6b3194?version=3.31.2
您可以在此处找到我们的示例 svelte 项目:https://github.com/tw-in-js/example-svelte
需要注意的一点是,setup
应该位于 app initializer 中的组件之外或 <script context="module">
内。这可确保每个应用仅调用 setup
一次。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。