如何在 svelte 中禁用未使用的样式警告

Question

我有一个用于全局样式的 CSS 规则，该样式有效，但我的终端一直向我显示此警告，我该如何禁用它？

src/components/Navbar.svelte changed. rebuilding...
• server
src/routes/index.svelte
Module Warning (from ./node_modules/svelte-loader-hot/index.js):
Unused CSS selector "*" (22:2)
20: 
21: <style global>
22:   * {
      ^
23:     font-family: 'Poppins';
24:   }
• client
src/routes/index.svelte
Module Warning (from ./node_modules/svelte-loader-hot/index.js):
Unused CSS selector "*" (22:2)
20: 
21: <style global>
22:   * {
      ^
23:     font-family: 'Poppins';
24:   }
✔ service worker (73ms)

Answer 1

很有趣，但我在官方文档中找不到任何关于 <style global> 的信息。您在哪里看到支持这种语法？

要解决此问题，您可以使用 :global(*) 修饰符而不仅仅是 * 选择器，或者将所有全局样式移动到单独的 global.css 文件中（用于声明 *、body、@987654330 的样式@, ...)。您可以在 official template 中找到基本的苗条项目架构，并且有一个 /src/public/global.css 文件。

Answer 2

在 rollup.config.js 中

export default {
    plugins: [
         svelte({
            onwarn: (warning, handler) => {
                const { code, frame, filename } = warning
                if (code === "css-unused-selector" && filename == 'src/routes/index.svelte') {
                    return;
                }
                handler(warning)
            },

         }),
      ]
    }