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

Question

我试图通过此处: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;
  }
}

我收到错误：

 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;
  }
}

……我很生气