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

Posted 2023-02-19

【中文标题】通过 CSS 模块将 SCSS 变量导出到 JavaScript/Svelte，而不会发出 lint 警告

【英文标题】：Exporting SCSS variables into JavaScript/Svelte via CSS Modules without lint warning

【发布时间】：2022-01-20 15:52:53

【问题描述】：

我正在尝试通过: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,

我的问题是：

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

【问题讨论】：

此外，我对将原始样式元素写入安装后解析的页面的解决方案不感兴趣。

【参考方案1】：

这行得通。

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

...我很生气