如何禁用 Svelte 警告“未使用的 CSS 选择器”

Question

我的图形设计师格式化 Svelte 应用程序的方法是在 LESS 中拥有一组系统的类，在组件或页面中导入适当的 LESS 文件，然后在他需要的任何地方应用这些类。因此，我们有大量未使用的类，我们可能会在以后使用它们。

Svelte 的优点在于未编译未使用的 CSS，因此所有那些（尚未）冗余的类无论如何都不会妨碍。然而，每当我们编译时，我们都会收到一大堆警告：“未使用的 CSS 选择器”。这是一个主要的麻烦，因为它使得在创建实际错误时更难注意到。另外它看起来很丑。

我检查了文档，有一种方法可以抑制警告，但这仅适用于 HTML 部分。

有没有办法摆脱这些警告？请注意，我们使用Svelte Preprocess。

Answer 1

我发现这个解决方案更流畅一些，我稍作修改：

// rollup.config.js
...
svelte({
    ...
    onwarn: (warning, handler) => {
        const { code, frame } = warning;
        if (code === "css-unused-selector")
            return;

        handler(warning);
    },
    ...
}),
...

Answer 2

你必须让编译器不要呕吐，也不要让 VSCode 对你大喊大叫。

工作区级别 VSCode 设置

  "svelte.plugin.svelte.compilerWarnings": {
    "css-unused-selector": "ignore",
  }

sveltekit.config.ts

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),
    onwarn: (warning, handler) => {
        if (warning.code === 'css-unused-selector') {
            return;
        }
        handler(warning);
    },
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
    preprocess: vitePreprocess()
};

export default config;

来源：https ://github.com/sveltejs/language-tools/issues/650#issuecomment-1729917996