Search code examples
sveltesapper

How to disable unused style warning in svelte

I have a CSS rule which I used for global style, the style worked but my terminal keep show me this warning, how can I disable it?

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)
Solution

  • Interesting but I can't find anything about the <style global> in the official documentation. Where did you see that this syntax is supported?

    To fix that you can use the :global(*) modifier instead of just the * selector or move all global styles into a separated global.css file (useful to declare styles for *, body, a, ...). You can find a basic svelte project architecture in the official template and there is a /src/public/global.css file.