通过 CSS 模块将 SCSS 变量导出到 JavaScript/Svelte 而没有 lint 警告

Question

我正在尝试通过 :export 定义的功能与 svelte 组件共享 SASS 文件中定义的变量 here.

我知道这是可能的，因为这与我 expect/want 完全一样：

// 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>

这有效，但会生成警告：

WARNING: You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "white"). If you really want to use the color value here, use '"" + $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;
  }
}

...我很生气

通过 CSS 模块将 SCSS 变量导出到 JavaScript/Svelte 而没有 lint 警告

Exporting SCSS variables into JavaScript/Svelte via CSS Modules without lint warning

javascript

sass

css-modules

svelte