javascript - 如何使用 svelte :global() with sass/scss?

Question

我有一个带有动态类的 Svelte 组件，根据大多数 GitHub 问题和 StackOverflow 答案，确保未使用的选择器不会不必要地从编译中删除的最佳选择是使用 :global() CSS 元素的函数。

不幸的是，它似乎不起作用，语法给出了嵌套类的错误。以下是我的组件:

<script lang="ts">
  export let color: "orange" | "blue" | "green" | "purple" = "blue";
  export let text: string = "";
  export let showDot: boolean = false;
  export let active: boolean = false;
</script>

<button class={color === "orange" + active ? " active" : ""}>
  <span>{text}</span>

  {#if showDot}
    <span class="dot">•</span>
  {/if}
</button>

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

    &.orange {
      .dot {
        color: #ff9100;
      }

      &.active {
        background-color: #ff9100;
        color: #fff;
      }
    }

    &.blue {
      .dot {
        color: #69bcff;
      }

      &.active {
        background-color: #69bcff;
        color: #fff;
      }
    }

    &.purple {
      .dot {
        color: #5c6bc0;
      }

      &.active {
        background-color: #5c6bc0;
        color: #fff;
      }
    }

    &.green {
      .dot {
        color: #66bb6a;
      }

      &.active {
        background-color: #66bb6a;
        color: #fff;
      }
    }
  }
</style>

目前这段代码给我错误(或警告):

Unused CSS selector "button.orange .dot" svelte(css-unused-selector)
Unused CSS selector "button.orange.active" svelte(css-unused-selector)
Unused CSS selector "button.blue .dot" svelte(css-unused-selector)
Unused CSS selector "button.blue.active" svelte(css-unused-selector)
Unused CSS selector "button.purple .dot" svelte(css-unused-selector)
Unused CSS selector "button.purple.active" svelte(css-unused-selector)
Unused CSS selector "button.green .dot" svelte(css-unused-selector)
Unused CSS selector "button.green.active" svelte(css-unused-selector)

我尝试使用 :global(button) 但它给了我同样的错误，并且在其中一个嵌套类上使用它时(例如 :global(&.orange)) 或任何变体，它给我一个语法错误。

我会怎样:

一个。使用 :global() 确保选择器不被删除？

或

找到其他方法来防止选择器被删除？

Answer 1

你可以这样使用

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

    & :global(.orange) {
      .dot {
        color: #ff9100;
      }

      & :global(.active) {
        background-color: #ff9100;
        color: #fff;
      }
    }
</style>