小编Bri*_*ice的帖子

我试图通过此处:export定义的功能与 svelte 组件共享 SASS 文件中定义的变量。

我知道这是可能的，因为这完全按照我的预期/想要的方式工作：

// styleExport.module.scss
$colors: (
  red: #ff0000,
  green: #00ff00, 
  blue: #0000ff
)

:export {
  @each $color, $value in $colors {
    #{$color}: $value;
  }
}

// component.svelte
<div><!-- some markup--></div>

<script>
  import importedColors from "../styleExport.module.scss";
  console.log(importedColors);
/*
 produces expected output on the page of: 
 {red: '#f00f00', green: '#00ff00', blue: '#0000ff'}
*/
</script>

这有效，但会生成警告：

警告：您可能不想在此处使用颜色值白色进行插值。它最终可能会呈现为白色，这可能会产生无效的 CSS。将颜色名称用作字符串或映射键时，请始终引用颜色名称（例如“白色”）。如果您确实想在此处使用颜色值，请使用 '"" + $color'。

当我更新styleExport.module.scss文件以使用他们请求的插值实现时：

:export {
  @each $color, $value in $colors {
    #{'"" + $color'}: $value; …