通过 CSS 模块将 SCSS 变量导出到 JavaScript/Svelte，而不会发出 lint 警告

Question

我正在尝试通过:export 功能将 SASS 文件中定义的变量与 svelte 组件共享，因为它被定义为here。

我知道这是可能的，因为这完全符合我的期望/希望：

// 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。将颜色名称用作字符串或映射键时，请始终引用颜色名称（例如，“white”）。如果你真的想在这里使用颜色值，使用'"" + $color'。

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

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

我得到错误：

 You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
 File: /app/src/lib/styles/testExport.module.scss
[build ]   1  |
[build ]   2  |  $colors: (
[build ]      |          ^
[build ]   3  |    red: #f00,
[build ]   4  |    green: #0f0,

我的问题是：

• 有没有办法抑制我在初始实现中看到的插值警告？
• 如果不是，我该如何以符合预期插值标准的方式实现这一点

Answer 1

这行得通。

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

...我很生气