Exportando variables SCSS a JavaScript/Svelte a través de CSS Modules sin advertencia de lint.
Estoy intentando compartir las variables definidas en un archivo SASS con un componente Svelte a través de la funcionalidad :export
como se define aquí.
Sé que es posible, ya que esto funciona exactamente como espero/deseo:
// styleExport.module.scss
$colors: (
red: #ff0000,
green: #00ff00,
blue: #0000ff
);
:export {
@each $color, $value in $colors {
#{$color}: $value;
}
}
// component.svelte
<div><!-- algún marcado --></div>
<script>
import importedColors from "../styleExport.module.scss";
console.log(importedColors);
/*
produce la salida esperada en la página de:
{red: '#f00f00', green: '#00ff00', blue: '#0000ff'}
*/
</script>
Esto funciona, pero genera la advertencia:
ADVERTENCIA: Probablemente no quieras usar el valor de color blanco en la interpolación aquí. Puede terminar representado como blanco, lo que probablemente generará CSS no válido. Siempre encierra los nombres de color entre comillas al usarlos como cadenas o claves de mapas (por ejemplo, “blanco”). Si realmente quieres usar el valor de color aquí, usa ””” + $color’.
Cuando actualizo el archivo styleExport.module.scss
para usar su implementación de interpolación solicitada:
:export {
@each $color, $value in $colors {
#{'"" + $color'}: $value;
}
}
Obtengo el error:
Intentaste analizar SCSS con el analizador CSS estándar; intenta de nuevo con el analizador postcss-scss.
Archivo: /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 estoy viendo en mi implementación inicial?
– Si no es así, ¿cómo puedo implementar esto de una manera que coincida con los estándares de interpolación esperados?
davy.ai
Compartir variables desde un archivo SASS a un componente Svelte utilizando la funcionalidad de :export
Introducción
Para compartir variables desde un archivo SASS a un componente Svelte, se puede utilizar la funcionalidad de :export. En este escenario, un experto en TI está tratando de utilizar la funcionalidad de :export pero está enfrentando algunos problemas.
Problema
El experto está enfrentando un problema con la funcionalidad de :export en el cual puede compartir variables correctamente desde un archivo SASS a un componente Svelte, pero está recibiendo una advertencia. Además, cuando sigue la sugerencia dada en la advertencia, obtiene un error.
Solución
Suprimir la advertencia de interpolación
La advertencia se puede suprimir al poner entre comillas los nombres de colores al utilizarlos como cadenas o claves de un mapa. El experto puede modificar el archivo
styleExport.module.scss
para usar nombres de colores entre comillas como claves de mapa de la siguiente manera:Implementar interpolación
Para implementar interpolación, el experto necesita utilizar el analizador
postcss-scss
en lugar del analizador CSS estándar. Esto se puede hacer instalando el analizador de la siguiente manera:Una vez instalado el analizador, el experto puede modificar el archivo
rollup.config.js
para utilizar el analizadorpostcss-scss
de la siguiente manera:Luego, el experto puede modificar el archivo
styleExport.module.scss
para utilizar la interpolación de la siguiente manera:Conclusión
En conclusión, el experto puede suprimir la advertencia de interpolación utilizando nombres de colores entre comillas y puede implementar la interpolación utilizando el analizador
postcss-scss
.