如何在Svelte的SCSS中强制添加嵌套全局样式规避未使用提示

方案1：将整个选择器结构声明为全局 #

把包含嵌套样式的父选择器整体包裹在:global()中，让Svelte将所有嵌套选择器都视为全局样式，跳过未使用检测：

<style lang="scss">
:global(div.marked) {
  a,
  a:visited {
    color: #3498db;
  }

  a:hover,
  a:focus,
  a:active {
    color: #2980b9;
  }

  pre {
    background-color: #fafafa;
    padding: 1rem;
    text-align: left;
  }
}
</style>

方案2：使用Svelte专属的@global嵌套指令 #

在组件样式中，通过@global标记嵌套块内的样式为全局，适合需要保留部分本地选择器的场景：

<style lang="scss">
div {
  @global {
    &.marked {
      a,
      a:visited {
        color: #3498db;
      }

      a:hover,
      a:focus,
      a:active {
        color: #2980b9;
      }

      pre {
        background-color: #fafafa;
        padding: 1rem;
        text-align: left;
      }
    }
  }
}
</style>

方案3：全局导入外部SCSS文件 #

如果是导入外部样式文件，不要嵌套在组件选择器内，直接在全局作用域导入：

<style lang="scss">
:global {
  @import './theCss.scss';
}
</style>

或者直接在外部SCSS文件中，将所有样式包裹在:global()里，导入后自动生效为全局样式。

原写法失效原因 #

你之前的div:global(.marked)写法中，Svelte仍会将div视为组件本地选择器，检查模板中是否直接使用该元素。如果目标div是动态生成或来自外部内容，就会触发未使用CSS的提示。而上述方案通过将整个选择器或嵌套块标记为全局，彻底跳过了Svelte的本地选择器检测逻辑。

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