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

Question

我试图通过自定义属性将附加类传递给组件，但编译器检测到该类未在使用中并且不包含它。给定这个组件：

<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 属性将我的附加类传递给它：

<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”类，但不包括我在 .my-image-button 中声明的样式规则。有没有办法强制编译器包含样式规则或其他工作流程来启用此功能？

Answer 1

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

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

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

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