Svelte：将类添加到 div 不会将类 CSS 添加到 div

Question

我们遇到了一个问题，点击是将一个类添加到 div，但类 CSS 没有添加到 div。它只是添加了类。

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

创建了一个 REPL 来查看它。任何解释或解决方案表示赞赏

https://svelte.dev/repl/85554a5f15134a5694c36fc4f4782029?version=3.23.2

Answer 1

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

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

在您的情况下，编译器blueText在标记中看不到该类，如“未使用的 CSS 选择器”警告所示。

使用 Svelte 条件类来获得编译器知道的条件（和作用域）类：

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