Diviser le thème SCSS en plusieurs fichiers

Documentation Guides pour les développeurs
1

Les thèmes et les composants de thème deviennent de plus en plus puissants, et les développeurs deviennent de plus en plus ambitieux. Pour faciliter les choses aux développeurs, les thèmes peuvent désormais diviser leur SCSS en plusieurs fichiers.

Lors de la création d’un nouveau thème avec le theme CLI, ou lors du partage d’un thème sur github, créez simplement un nouveau dossier nommé scss. Remplissez-le avec vos fichiers .scss, en suivant n’importe quelle structure de dossier, et tous les fichiers seront disponibles pour être importés dans les sections SCSS communes / bureau / mobile de votre thème.

Par exemple, si vous souhaitez qu’une variable commune soit disponible pour le SCSS mobile et bureau, vous pouvez faire quelque chose comme ceci :

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;
}

Cette fonctionnalité a été ajoutée dans v2.3.0.beta8, donc n’utilisez pas ces fonctionnalités pour le moment si vous devez maintenir une rétrocompatibilité avec les anciennes versions de Discourse. Vous pouvez utiliser le paramètre minimum_discourse_version de about.json pour vous assurer que votre composant n’est pas utilisé sur une version antérieure.

Ce document est contrôlé par version - suggérez des modifications sur github.

20 « J'aime »
Breaking up common.scss into multiple files in components?
Discourse 2.3.0.beta9 Release Notes
Need help with theme component Github
Please support any theme/component. css+html can be customized
2

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 « J'aime »
3

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

5 « J'aime »
4

@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 « J'aime »
6

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

4 « J'aime »
7

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?

8

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

9

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

10

Does your test.scss file have any content?

11

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 « J'aime »
12

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 « J'aime »
13

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.

14

Est-il possible d’utiliser des fichiers scss d’un package node_modules ? Par exemple :

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

Dans les deux cas, je ne peux pas importer cela depuis le dossier /scss.