如何将 svelte :global() 与 sass/scss 一起使用？

Posted 2023-03-13

【中文标题】如何将 svelte :global() 与 sass/scss 一起使用？

【英文标题】：How to use svelte :global() with sass/scss?

【发布时间】：2021-12-19 19:16:57

【问题描述】：

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

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

<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()保证选择器不被移除？

或

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

【参考方案1】：

似乎我找到了一种不涉及使用:global() 的解决方法。由于我的主要目标是防止 CSS 选择器被标记为未使用，因此我在 svelte 中使用了“类指令”，并像这样修改了我的按钮：

<button
  class:orange=color === "orange"
  class:blue=color === "blue"
  class:purple=color === "purple"
  class:green=color === "green"
  class:active
>
  <span>text</span>

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

【参考方案2】：

你可以这样使用

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

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

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