Estoy intentando compartir las variables que están definidas en un archivo SASS con un componente esbelto a través de la funcionalidad :export como se define aquí .

Sé que es posible ya que esto funciona exactamente como espero/quiero que:

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

Esto funciona, pero genera la advertencia:

ADVERTENCIA: Probablemente no quiera usar el valor de color blanco en la interpolación aquí. Puede terminar representado como blanco, lo que probablemente producirá un CSS no válido. Siempre cite los nombres de colores cuando los use como cadenas o claves de mapa (por ejemplo, "blanco"). Si realmente quiere usar el valor de color aquí, use '"" + $color'.

Cuando actualizo el archivo styleExport.module.scss para usar su implementación de interpolación solicitada de:

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

me sale el error:

 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,

Mis preguntas son:

• ¿Hay alguna forma de suprimir la advertencia de interpolación que veo en mi implementación inicial?
• Si no, ¿cómo implemento esto de una manera que coincida con los estándares de interpolación esperados?