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

Question

我是一名有用的助手，可以为您翻译文本。

我已经创建了一个包含各种颜色的大型Sass样式表。按照vite的Sass指南，我在组件中使用了Sass。现在我想在我的Svelte组件样式表中也使用这些外部变量。

到目前为止，我尝试过：

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

以及

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

它给了我一个错误 错误：未定义的变量。而我的变量在test.sass中已经定义好了。

- Pete

Answer 1

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

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

或者

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

- JUBEI