使用 Svelte 和 Vite 导入外部 sass 或 scss 变量

Question

我创建了一个包含各种颜色的大型 sass 样式表。在vite's guide for sass 之后，我在我的组件中开始工作了。现在我也想在我的 Svelte 组件的样式表中使用这些外部变量。

到目前为止我已经尝试过：

@use "./test.sass" // along with "./test"
p {
  color: $testColor
}

还有

@import url("./test.sass") // along with "./test"
// ... same as above

它给了我一个错误Error: Undefined variable。我的变量在 test.sass 中正确定义

Answer 1

@use 将导入的变量包装在命名空间中，因此您必须明确声明这些变量来自模块，而不是 $testColor。

@use "./test.sass"
p {
  color: test.$testColor
}

或

@use "./test.sass" as *
p {
 color: $testColor
}