Considere el siguiente archivo _variables.scss :
/* Define all colours */ $white: #fff; $black: #000; $grey: #ccc; // etc... // Export the color palette to make it accessible to JS :export { white: $white; black: $black; grey: $grey; // etc... }El propósito del código anterior es hacer que las variables SCSS estén disponibles para Javascript mediante la importación de esta manera:
import variables from 'variables.scss';Vea una descripción más detallada aquí .
Ahora considere la siguiente plantilla (he usado una plantilla Vue.js como ejemplo, pero esto es relevante para numerosos marcos):
<!-- Template here... --> <style lang="scss" scoped> // Import Partials @import "~core-styles/brand/_variables.scss"; @import "~core-styles/brand/_mixins.scss"; // Styles here... </style> En el ejemplo anterior, he usado el atributo con scoped , ya que demuestra el peor de los casos para el problema que se avecina, pero incluso sin el scoped , el problema sigue siendo relevante.
El SCSS anterior se compilará en algo similar a:
[data-v-9a6487c0]:export { white: #fff; black: #000; grey: #ccc; // etc... } Además, con el atributo scoped , esto se repetirá cada vez que _variables.scss se importe a una plantilla y puede generar código redundante adicional. En algunos casos, para aplicaciones grandes (muchos componentes y una gran paleta de colores), esto puede literalmente agregar miles de líneas de código completamente redundante.
¿Hay alguna forma de exportar las variables SCSS a Javascript sin exportarlas a CSS?
Idealmente, estoy tratando de evitar una solución de tener un archivo separado llamado, por ejemplo, _export.scss donde su propósito es simplemente exportar todas las variables SCSS a JS, pero está excluido de todas las compilaciones CSS ...
Solo para ampliar la solución sucia anterior, esto es a lo que estoy recurriendo actualmente (en mi caso, en un sitio web de tamaño estándar, hasta ahora me ha ahorrado ~ 600 líneas de código CSS redundante):
_export.scss
/* |-------------------------------------------------------------------------- | SASS Export |-------------------------------------------------------------------------- | | Define any variables that should be exported to Javascript. This file | is excluded from the CSS builds in order to prevent the variables from | being exported to CSS. | */ @import "variables"; :export { // Export the color palette to make it accessible to JS white: #fff; black: #000; grey: #ccc; // etc... } Luego, en mi Javascript en lugar de importar desde _variables.scss , importo desde _export.scss así:
import styles from 'core-styles/brand/_export.scss'; Y finalmente, la declaración de export ahora se puede eliminar del archivo _variables.scss , evitando así el código de export CSS compilado.
Nota: ¡El archivo _export.scss debe excluirse de la compilación SCSS!
Nota: publiqué esta respuesta porque parece que no hay una solución mejor , sin embargo, si alguien proporciona una solución mejor posteriormente, estaré más que feliz de aceptarla.
Parece que la única solución real a esto es extraer la declaración de export del archivo _variables.scss y colocarla en su propio archivo _export.scss que posteriormente no se incluirá en la compilación SCSS.
Esto se verá algo como esto:
_variables.scss - incluido en la compilación SCSS
/* Define all colours */ $white: #fff; $black: #000; $grey: #ccc; // etc..._export.scss : no incluido en la compilación SCSS
@import "variables"; :export { // Export the color palette to make it accessible to JS white: #fff; black: #000; grey: #ccc; // etc... } Y luego su app.scss (yo uso brand.scss ) se verá así (tenga en cuenta la ausencia de @include "export"; ):
@import "variables"; @import "mixins"; @import "core"; @import "animations"; // etc... Entonces, _export.scss es simplemente una referencia solo en JavaScript así (tenga en cuenta que core-styles es solo un alias que usé en mis proyectos):
import styles from 'core-styles/brand/_export.scss';