如何解决VS Code中SvelteKit项目出现的Unused CSS selector警告

问题原因 #

当前告警是因为prependData配置将全局样式文件注入到了每个组件的<style lang="scss">块中，每个组件单独做CSS静态校验时，都会检测到全局样式里的选择器没有在当前组件用到，因此触发告警。你之前添加的onwarn规则不生效通常有两个原因：一是告警来自VS Code的Svelte扩展实时lint，不是项目编译阶段的告警；二是新版本SvelteKit的onwarn规则需要配置在Vite插件侧才能生效。

方案1（最推荐，从根源解决） #

将全局样式导入从prependData中移除，避免每个组件重复注入全局样式，同时还能避免打包产物出现冗余CSS：

1. 修改svelte.config.js的预处理配置，prependData仅导入不生成实际CSS的变量、mixin、函数类公共文件，删除全局样式的导入：

scss: {
    // 示例：仅导入变量文件，不要导入生成实际类名的全局样式
    prependData: `@import 'src/scss/variables.scss';`
}

2. 全局样式统一在根布局文件src/routes/+layout.svelte中导入，加上global标记确保全局生效：

<!-- src/routes/+layout.svelte -->
<style lang="scss" global>
    @import 'src/scss/global.scss';
</style>

方案2（需要保留prependData注入逻辑时使用） #

分别配置消除编译告警和编辑器告警：

1. 消除SvelteKit编译阶段告警：将onwarn规则迁移到vite.config.js的Svelte插件配置中：

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        sveltekit({
            onwarn: (warning, handler) => {
                if (warning.code === 'css-unused-selector') return;
                handler(warning);
            }
        })
    ]
});

2. 消除VS Code编辑器实时告警：在项目根目录新建/编辑.vscode/settings.json，添加如下配置：

{
    "svelte.ignoreDiagnostics": ["css-unused-selector"]
}

如果使用svelte-check做CI校验，启动时添加--ignore css-unused-selector参数即可消除对应告警。

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