Question

我正在尝试通过自定义属性将其他类传递给组件，但是编译器检测到该类未在使用中并且未包含该类。鉴于此组件：

我创建了一个这样的实例，并将其通过CSS类prop传递给我的附加类：

<script>
    import {createEventDispatcher} from 'svelte';

    const dispatch = createEventDispatcher();

    export let imageUrl = null;
    export let cssClass = '';
    export let data = null;

    function handleImageClick(e){
        dispatch('press', {element:this, event: e, props: $$props });
    }
</script>
<style>
    .image-button{
        width:100px;
        height: 72px;
    }
</style>

<div class="image-button {cssClass}" on:click={handleImageClick} style="background:url({imageUrl});background-size: cover;"></div>

创建了ImageButton实例，它具有附加的“ my-image-button”类，但是不包括我在.my-image-button中声明的样式规则。有没有一种方法可以强制编译器包括样式规则或其他工作流程以启用此功能？

Answer 1

在父组件中，将.my-image-button更改为:global(.my-image-button)。这样，Svelte将知道需要保留该选择器。

如果要确保CSS仅适用于在声明样式的组件内类的元素，则可以使用wrapper元素：

<div>
  <ImageButton .../>
</div>

<style>
  div :global(.my-image-button) {
    /* ... */
  }
</style>

如何强制Svelte编译器包含样式规则？

1 个答案: