我可以保留“未使用的 CSS 选择器”吗？答案

【问题标题】：Can I keep "unused css selector"?我可以保留“未使用的 CSS 选择器”吗？
【发布时间】：2023-03-22 21:28:01
【问题描述】：

我注意到 svelte 会自动清除我的 css，所有“未使用的 css 选择器”都会被删除。

例如：

<p class="blue">This is a paragraph.</p>

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

“红色”类的样式将被删除。如何保留“.blue”选择器？我想稍后在某个时候使用它。

【问题讨论】：

标签： svelte

【解决方案1】：

您可能希望将选择器包装在:global(...) 中，例如

:global(.red) {
    color: red;
}

这会强制 Svelte 保留该类，并使其选择器不在该单个组件的范围内。当 Svelte 删除您想要保留的选择器时，这通常是您想要的。

【讨论】：

【解决方案2】：

如果您安装了svelte-preprocess (link)，您也可以在样式标签中使用 global：

<style global>
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>

【讨论】：

在文档中找不到这个，当在 REPL 中使用时，仍然有警告“未使用的 CSS 选择器“.red”(5:4)”svelte.dev/repl/05c5c9d5f7f549268bcde93377fd7902?version=3.46.3我错过了什么吗？跨度>
@Corrl 显然，这只是在您安装了软件包 svelte-preprocess 时。我已经更新了答案

【解决方案3】：

如果您使用的是 Sveltekit，您可以创建一个 app.css（或 scss）文件并将其导入到您的主 __layout.svelte 文件中。

import '../app.scss';

如果您不使用 sveltekit，您可以编辑在 public/global.css 中找到的 global.css 文件

guide 更详细地解释了 Sveltekit 版本

【讨论】：