Svelte：将 class 添加到 div 不会将 classes CSS 添加到 div

Question

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

<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 规则，它只会看到组件标记中实际使用的 classes。

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

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

使用 Svelte 条件 class 获得编译器知道的条件（和作用域）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>

如果你不希望你的条件 class 被限定范围，你可以简单地让它 :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>

Svelte：将 class 添加到 div 不会将 classes CSS 添加到 div

Svelte: Adding a class to a div doesn't add the classes CSS to div

css

class

onclick

svelte

sapper