尝试更改以下内容:

<div id="text">
        Text
</div>

致:

<div class="blueText">
        Text
</div>

Svelte编译器移除未使用的CSS规则，它只看到组件标记中实际使用的类。

它必须这样做才能确定组件的CSS范围，因为范围确定的工作方式是将唯一生成的类添加到具有匹配（范围）CSS规则的所有组件元素中。

在您的示例中，编译器在标记中看不到Bluetext类，如“Unused CSS Selector”警告所示。

使用Svelte conditional class来拥有编译器知道的条件类（和作用域类）:

<script>
    let isBlue = false
    
    function handleClick() {
        isBlue = !isBlue
    }
</script>

<style>
    .blueText {
        color: blue;
    }
</style>

<button on:click={handleClick}>
    Click me
</button>

<div class:blueText={isBlue}>
    Text
</div>

或者，使用快捷语法:

<script>
    let blueText = false
    
    function handleClick() {
        blueText = !blueText
    }
</script>

<style>
    .blueText {
        color: blue;
    }
</style>

<button on:click={handleClick}>
    Click me
</button>

<div class:blueText>
    Text
</div>

如果您不希望条件类被限定作用域，您可以简单地将其设置为:global--Svelte编译器从不修剪全局规则，它不需要这样做。

<script>
    function handleClick() {
        document.getElementById('text').classList.add('blueText')
    }
</script>
<style>
    :global(.blueText) {
        color: blue;
    }
</style>
<button on:click={handleClick}>
    Click me
</button>
<div id="text">
    Text
</div>