如何在Svelte的Sass/Scss中使用:global()解决动态类选择器误删问题

首先修复核心的类绑定逻辑错误 #

你当前的class绑定写法color === "orange" + active ? " active" : ""会先执行字符串拼接，将"orange"和布尔值active拼接为"orangetrue"或"orangefalse"，再和color变量做匹配，结果永远为false，导致颜色类和active类都不会被挂载到button上，这是触发未使用选择器警告的直接原因。

最稳妥的修复方式是使用Svelte原生的类指令，显式声明所有可能用到的类，Svelte可以直接识别到这些类的使用逻辑，不会触发未使用警告，不需要修改任何CSS代码：

<button 
  class:orange={color === 'orange'}
  class:blue={color === 'blue'}
  class:green={color === 'green'}
  class:purple={color === 'purple'}
  class:active={active}
>

如果不想用类指令，也可以改成字符串拼接的写法：class={${color} ${active ? 'active' : ''}}

方案a：正确使用:global()避免选择器被移除 #

如果需要保留当前的类绑定写法，不想用类指令，可以按以下规则在SCSS嵌套中使用:global()，不会触发语法错误：

1. 给动态类单独加:global()标记，不需要包裹整个选择器

<style lang="scss">
  button {
    width: 80px;
    color: #00000099;
    opacity: 80%;

    &:global(.orange) {
      .dot {
        color: #ff9100;
      }
      &:global(.active) {
        background-color: #ff9100;
        color: #fff;
      }
    }

    &:global(.blue) {
      .dot {
        color: #69bcff;
      }
      &:global(.active) {
        background-color: #69bcff;
        color: #fff;
      }
    }
    /* 其余颜色类同理修改即可 */
  }
</style>

2. 如果嫌逐个加:global()麻烦，也可以用:global()块包裹所有动态类的样式：

<style lang="scss">
  button {
    width: 80px;
    color: #00000099;
    opacity: 80%;

    :global {
      &.orange {
        .dot {
          color: #ff9100;
        }
        &.active {
          background-color: #ff9100;
          color: #fff;
        }
      }
      /* 其余颜色类写在这个块里即可 */
    }
  }
</style>

方案b：其他避免选择器被移除的方法 #

如果不想修改CSS，也不想调整类绑定逻辑，可以直接关闭当前组件的未使用CSS选择器警告，在style标签前加一行注释即可：

<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
/* 原有样式不需要做任何修改 */
</style>

这个方法不会影响样式生效，只是屏蔽了对应组件的该类警告。

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