Dividir el tema SCSS en múltiples archivos

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.

20 Me gusta

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 Me gusta

This is a great! I can now remove my hack for getting around not being able to do this.

5 Me gusta

@david this is great, but unfortunately it doesn’t seem to work when the theme is a component. Not sure if that’s a known bug.

You can see it happen with this very simple theme: GitHub - LeoMcA/discourse-multi-scss-component

When converted to a stand-alone theme the background colour will be green, but when used as a component within another theme it doesn’t change the background colour at all.

5 Me gusta

Thanks @LeoMcA, you’re right - this wasn’t working in components. The issue should be fixed in

4 Me gusta

Is that still supposed to work? My default scss files (common/desktop/mobile) don’t work when I add an @import.

Or is there a new recommendation for splitting files?

This should still work. Can you share the precise @import statement you’re using, and the file structure of your stylesheets?

The theme setup has default file structure and I added scss/test.scss Then I state @import "test";

On the console (using discourse_theme watch) I get:
✘ Error in common scss: Error: File to import not found or unreadable: test. on line 1 of common.scss

Does your test.scss file have any content?

Just declared one variable (btw there’s a typo on the first code block above, declared with equals: $favourite-color = red;)

But just solved it. I set the minimum version in about.json as v2.3.0.beta8 and when I remove that, it works just fine. Never used that before, so not sure what’s wrong with the declaration.

1 me gusta

Interesting! If you add the minimum version again, does it consistently break? If so, would you mind zipping up the broken theme and sharing it here? (or PMing it to me)

1 me gusta

As said, I never set a min version before. So I just copied it above as v2.3.0.beta8. This breaks, but 2.3.0.beta8 works just fine.

¿Es posible usar archivos scss de un paquete de node_modules? Por ejemplo:

@import 'bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

En ambos casos, no puedo importar esto desde la carpeta /scss.