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

Question

我试图通过自定义属性将附加的 class 传递给组件，但编译器检测到 class 未在使用中，因此不包含它。鉴于此组件：

<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>

我创建了一个这样的实例，并通过 cssClass 属性将其附加 class 传递给它：

<script>
   import ImageButton from './components/ImageButton.svelte';

   let imgUrl = "/images/test.png";
</script>
<style>
   .my-image-button{
      border: 1px solid white;
   }
</style>
<ImageButton imageUrl={imgUrl} cssClass="my-image-button" />

ImageButton 实例已创建，它具有额外的 "my-image-button" class 但不包括我在 .my-image-button 中声明的样式规则。有没有办法强制编译器包含样式规则或其他工作流来启用此功能？

Answer 1

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

如果要确保 CSS 仅适用于具有 class inside 声明样式的组件的元素，您可以使用包装元素：

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

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

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

How can I force the svelte compiler to include a style rule?

svelte

sapper