如何为Svelte组件添加局部SCSS样式以避免全局污染？

直接在<script>里导入.scss文件会导致样式全局生效，这是因为这种导入方式相当于把样式直接注入到全局样式表中，Svelte不会对这类样式做作用域隔离处理。要让样式仅作用于当前组件，有两种可行方案：

方案1：使用组件内的<style>标签（推荐） #

将SCSS代码迁移到组件的<style>标签中，并添加lang="scss"属性，Svelte会自动为当前组件的元素添加唯一的data-svelte-hash属性，同时将样式选择器与该属性绑定，实现样式隔离。

示例代码：

<script>
  // 无需再导入.scss文件
</script>

<h1>仅当前组件的h1会应用样式</h1>

<style lang="scss">
h1 {
  border: 3px solid red;
}
</style>

你的项目已经安装了sass依赖，只要在<style>标签声明lang="scss"，就能正常编译SCSS语法，这种方式完全符合Svelte的样式作用域设计，配置简单且效果可靠。

方案2：使用:local()修饰符（适用于单独的SCSS文件） #

如果必须保留单独的.scss文件，可以在SCSS中用:local()包裹需要作用域化的样式，然后在组件的<style>标签中导入该文件（注意不要在<script>里导入）。

示例：

1. CancelOrder.scss文件内容：

:local(h1) {
  border: 3px solid red;
}

2. 组件中导入：

<style lang="scss">
@import './CancelOrder.scss';
</style>

这种方式下，:local()包裹的样式会被Svelte处理为作用域样式，仅对当前组件的元素生效。

内容的提问来源于stack exchange，提问作者Nir O.