如何强制苗条编译器包含样式规则?

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>