vscode 中的 SvelteKit 未使用 CSS 选择器警告

Question

你好，我有一个烦人的问题。如何删除 VS Code Unused CSS 选择器警告。此警告存在于我使用的所有文件中。我知道我在某些组件中不使用 .btn class，但我希望这个 class 作为全局 css。

我的svelte.config.js:

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

        handler(warning);
    },
    preprocess: [
        preprocess({
            defaults: {
                style: 'scss'
            },
            postcss: true,
            scss: {
                prependData: `@import 'src/scss/global.scss';`
            }
        })
    ],
};

有人能帮帮我吗？

Answer 1

如果您使用 prependData，这意味着您将导入添加到每个使用样式的组件。这不是您想要的，因此删除此设置。您想要的是一次导入此文件，以便它在全球范围内可用。这可以通过将它导入脚本标签来完成，SvelteKit（或者更确切地说：Vite）可以处理样式导入。

在您的根 __layout.svelte 文件中，添加

<script>
  import 'path/to/your/global.scss';
</script>

vscode 中的 SvelteKit 未使用 CSS 选择器警告

SvelteKit Unused CSS selector warning in vscode

css

sass

visual-studio-code

svelte

sveltekit