Svelte/Vite中SCSS @use无法导入变量的问题求助

问题核心是SCSS的@use规则采用模块化设计，导入的变量默认带有命名空间（默认以导入文件的文件名作为命名空间），因此直接使用$color会被识别为未定义变量；而类选择器属于全局样式范畴，所以能正常生效。

解决方案1：通过命名空间访问变量 #

在Svelte组件的<style>标签中，使用导入文件的命名空间（这里是app，对应文件名app.scss）来调用变量：

// src/App.svelte
<style lang="scss">
  @use "../shared/app";

  .header-color {
    color: app.$color;
  }
</style>

解决方案2：取消命名空间导入 #

如果不想每次都写命名空间，可以在导入时用as *将所有成员导入到当前作用域：

// src/App.svelte
<style lang="scss">
  @use "../shared/app" as *;

  .header-color {
    color: $color;
  }
</style>

解决方案3：使用@forward规范导出变量（适合多组件共享场景） #

如果需要在多个组件中共享变量，推荐将变量单独拆分（比如/shared/_variables.scss），然后在app.scss中通过@forward导出：

// shared/_variables.scss
$color: #ABCABC;

// shared/app.scss
@forward "./variables";

.test {
  background-color: #5C5C5C;
}

之后在组件中就可以通过命名空间或无命名空间的方式使用变量，和前面两种方法一致。

内容的提问来源于stack exchange，提问作者Jack 't Jong