时间戳

首页 > 解决方案 > 如何强制 svelte 编译器包含样式规则？

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

问题描述

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

<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 中声明的样式规则。有没有办法强制编译器包含样式规则或其他工作流程来启用此功能？

标签： sveltesapper

解决方案

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

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

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

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

推荐阅读