SvelteKit中:global()内.dropcap选择器被移除的解决方法咨询

问题描述 #

在SvelteKit的+layout.svelte中使用SCSS编写全局样式，因未找到内置全局样式创建方式，采用:global()结合:where()实现多选择器全局样式。代码如下：

:global(:where(p, .content)) {
    $size: 1rem;

    &:not(:last-child) {
        margin-block-end: #{$line-height}rem;
    }

    &.dropcap::first-letter {
        $line-count: 2;
        font-size: calc($size * (1 + ($line-count * $line-height)));
        float: left;
        line-height: 0;
        vertical-align: middle;
        clear: both;
    }
}

其中&:not(:last-child)正常生效，但&.dropcap::first-letter被终端提示为未使用选择器并从CSS输出中移除（匹配该规则的内容会放入layout的<slot />中）。若使用&:global(.dropcap)，Svelte会在CSS输出中额外添加一层:global()。

解决方案 #

有几种可行的方式避免该规则被移除：

1. 将.dropcap单独放入全局作用域 #

把.dropcap的样式直接用:global()包裹，不嵌套在:where()内部，这样Svelte不会将其标记为未使用：

:global(:where(p, .content)) {
    $size: 1rem;

    &:not(:last-child) {
        margin-block-end: #{$line-height}rem;
    }
}

:global(:where(p.dropcap, .content.dropcap)::first-letter) {
    $size: 1rem;
    $line-count: 2;
    font-size: calc($size * (1 + ($line-count * $line-height)));
    float: left;
    line-height: 0;
    vertical-align: middle;
    clear: both;
}

这样既保持了全局作用域，又让Svelte识别到选择器的有效性。

2. 使用/* svelte-ignore unused-selector */注释 #

在被标记为未使用的选择器前添加Svelte的忽略注释，强制保留该规则：

:global(:where(p, .content)) {
    $size: 1rem;

    &:not(:last-child) {
        margin-block-end: #{$line-height}rem;
    }

    /* svelte-ignore unused-selector */
    &.dropcap::first-letter {
        $line-count: 2;
        font-size: calc($size * (1 + ($line-count * $line-height)));
        float: left;
        line-height: 0;
        vertical-align: middle;
        clear: both;
    }
}

这个注释会告诉Svelte的编译器跳过对该选择器的“未使用”检查，直接保留到输出CSS中。

3. 改用全局样式文件 #

SvelteKit支持直接在src/routes/+layout.svelte中导入全局SCSS文件，这是更规范的全局样式写法：

1. 在src/styles/global.scss中编写全局样式：

:where(p, .content) {
    $size: 1rem;

    &:not(:last-child) {
        margin-block-end: #{$line-height}rem;
    }

    &.dropcap::first-letter {
        $line-count: 2;
        font-size: calc($size * (1 + ($line-count * $line-height)));
        float: left;
        line-height: 0;
        vertical-align: middle;
        clear: both;
    }
}

2. 在+layout.svelte中导入该文件：

<script>
    import '../styles/global.scss';
</script>

<slot />

这种方式不需要额外的:global()包裹，因为全局样式文件中的样式默认就是全局作用域，Svelte不会对其进行选择器的未使用检查。

说明 #

• 第一种方式适合需要局部全局样式的场景，保持选择器的关联性；
• 第二种方式是临时解决方案，适合快速修复单个未使用选择器的问题；
• 第三种方式是SvelteKit推荐的全局样式管理方式，更便于维护大型项目的样式结构。

内容的提问来源于stack exchange，提问作者code913