Los temas y los componentes de tema son cada vez más potentes y los desarrolladores son cada vez más ambiciosos. Para facilitar las cosas a los desarrolladores, los temas ahora pueden dividir su SCSS en varios archivos.
Al crear un nuevo tema con el theme CLI, o al compartir un tema en github, simplemente crea una nueva carpeta llamada scss. Llénala con tus archivos .scss, siguiendo cualquier estructura de carpetas, y todos los archivos estarán disponibles para que los importes en las secciones comunes / de escritorio / móvil de SCSS de tu tema.
Por ejemplo, si quieres tener una variable común disponible tanto para el SCSS móvil como para el de escritorio, podrías hacer algo como esto:
scss/my-folder/variables.scss
$favourite-color = red;
desktop/desktop.scss
@import "my-folder/variables";
body {
background-color: $favourite-color;
}
mobile/mobile.scss
@import "my-folder/variables";
body {
color: $favourite-color;
}
Esta característica se añadió en v2.3.0.beta8, así que no utilices estas características todavía si necesitas mantener la compatibilidad con versiones anteriores de Discourse. Puedes usar el minimum_discourse_version parameter of about.json para asegurar que tu componente no se use en una versión anterior.
Este documento está controlado por versiones: sugiere cambios en github.
@david esto es genial, pero lamentablemente parece que no funciona cuando el tema es un componente. No estoy seguro de si se trata de un error conocido.
Al convertirlo en un tema independiente, el color de fondo será verde, pero cuando se usa como componente dentro de otro tema, no cambia el color de fondo en absoluto.
La configuración del tema tiene una estructura de archivos predeterminada y he agregado scss/test.scss. Luego, he declarado @import "test";.
En la consola (usando discourse_theme watch), obtengo: ✘ Error en el SCSS común: Error: No se encontró o no se puede leer el archivo a importar: test. en la línea 1 de common.scss
Solo declaré una variable (por cierto, hay un error tipográfico en el primer bloque de código de arriba: se declaró con signo igual: $favourite-color = red;).
Pero ya lo solucioné. Establecí la versión mínima en about.json como v2.3.0.beta8 y al quitarla, funciona perfectamente. Nunca lo había usado antes, así que no estoy seguro de qué está mal con la declaración.
¡Interesante! ¿Si vuelves a agregar la versión mínima, el problema se presenta de manera consistente? De ser así, ¿te importaría comprimir el tema que falla y compartirlo aquí (o enviármelo por mensaje privado)?
Como se mencionó, nunca había establecido una versión mínima antes. Así que simplemente la copié arriba como v2.3.0.beta8. Esto falla, pero 2.3.0.beta8 funciona perfectamente.