Svelte“未使用”的 CSS 未编译

Posted 2023-03-07

【中文标题】Svelte“未使用”的 CSS 未编译

【英文标题】：Svelte "Unused" CSS not compiling

【发布时间】：2021-09-08 22:04:54

【问题描述】：

我正在创建一个文本网格，其边框根据第 n 个子项（根据屏幕大小确定）略有变化。但是，svelte 将这些称为未使用的 css，即使它们已定义。出现此类错误的原因可能是什么？

    #each workWithUs as item, i
                <div
                    class="border-r-[1px] border-b-[1px] border-work-with-us border-opacity-100 lg:cell-lg md:cell-md sm:cell-sm ">
                    <div class="p-5 m-5">
                        #if i > 0
                            <span class="dot mb-[2px]" />
                            <span class="ml-2">item</span>
                        :else
                            <span class="text-2xl font-medium">item</span>
                        /if
                    </div>
                </div>
    /each

<style>
    .dot 
        height: 7px;
        width: 7px;
        background-color: #67c529;
        border-radius: 50%;
        display: inline-block;
    

    .cell-lg:nth-child(4n)  //unused css error here
        border-right-width: 0;
    

    .cell-md:nth-child(3n)  //unused css error here
        border-right-width: 0;
    

    .cell-sm:nth-child(2n)  //unused css error here
        border-right-width: 0;
    
</style>

【问题讨论】：

类的全名是lg:cell-lg，而不是cell-lg。您可能应该改用不同的类和媒体查询。

有没有办法为自定义类使用顺风媒体查询？

您可以在纯 CSS 中重现它们（使用相同的测量值），也可以使用 tailwind 配置中的断点创建自定义类。我从来没有在 Svelte 上使用过顺风，所以我无能为力了

【参考方案1】：

您没有在 CSS 选择器中定位正确的类。它们需要写成如下：

.lg\:cell-lg:nth-child(4n)  
    border-right-width: 0;


.md\:cell-md:nth-child(3n)  
    border-right-width: 0;


.sm\:cell-sm:nth-child(2n)  
    border-right-width: 0;