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