如何禁用Svelte项目中的未使用样式警告

警告原因说明 #

这是Svelte编译器的CSS未使用检测误判，你给style标签加了global属性后，全局选择器没有绑定到当前组件的DOM，编译器就误以为这条规则没有被使用，但实际全局样式可以正常生效。

解决方法 #

方法1：仅忽略当前规则的警告 #

不需要修改全局配置，在对应选择器前加忽略注释即可：

<style global>
  /* svelte-ignore unused-css */
  * {
    font-family: 'Poppins';
  }
</style>

方法2：调整全局样式写法 #

改用Svelte官方推荐的:global()语法包裹全局选择器，可避免这类误报：

<style>
  :global(*) {
    font-family: 'Poppins';
  }
</style>

方法3：全局关闭该类警告 #

如果项目里全局样式较多，不想每次都单独处理，可以在svelte.config.js中添加配置，直接关闭未使用CSS选择器的警告：

const config = {
  compilerOptions: {
    ignoreWarnings: ['css-unused-selector']
  }
}

export default config

SvelteKit项目也是修改同一个配置文件的对应字段即可。

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