Child theme from Harmony theme - build problem

Johan Watherman

Hi all.
I am writing in this section because the theme section generally contains a list of them, and themes are, however, some kind of plugin. If I am wrong, please in advance to move the topic.

I started to create my own derivative theme (using the child theme mechanism) based on Harmony. Nodebb v3.2.3. I used this https://github.com/nodebb/nodebb-theme-quickstart to start. I need to fix some issiues like change theme.less to css and write "baseTheme": "nodebb-theme-harmony" in my theme.json.

Unfortunately, I can't build styles for the theme. I see following problem:

2023-08-29T17:38:32.459Z [4567/9443] - info: [build]           client js bundle  build completed in 0.611sec
Error: Error: Undefined variable.
   ╷
29 │     font-family: $font-family-secondary;
   │                  ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../node_modules/nodebb-theme-harmony/scss/common.scss 29:15  @import
  ../../node_modules/nodebb-theme-harmony/scss/harmony.scss 3:9   @import
  ../../node_modules/nodebb-theme-harmony/theme.scss 1:9          @import
  theme.scss 1:9                                                  @import
  - 49:9                                                          root stylesheet

My brief research into the problem led me to the issue of fontsource - inter and poppins. I see that NodeBB import this packages itself but Harmony theme do it redundant and put both of them in static dir in plugin.json:

"staticDirs": {
		"inter": "node_modules/@fontsource/inter/files",
		"poppins": "node_modules/@fontsource/poppins/files"
	},

I tried a bit of a blind solution to this by adding similar snippets or as modules for the above modules but it was a pretty random attempt.
If anyone can help me out by pointing out what else I should do, I'd appreciate it. Additional explanation of what exactly is required here and why it doesn't work "out of the box" is also welcome, I have some customization work to do - it will save me a lot of debugging the engine to understand the nuances of plugins system.

<baris>

$font-family-secondary is defined in overrides.scss in harmony theme, you need an overrides.scss in your custom theme. Then you can define it there.

Johan Watherman

@baris thank you for your reply. In fact, I just had to copy the whole overrides.scss from harmony theme. It didn't even cross my mind that overrides won't come from base theme as second overrides but maybe its lack of my knowledge about sass.
Thank you.

<baris>

It is actually something nodebb specific, when building the active theme nodebb core looks for the overrides.scss file. This file needs to be imported in a specific order for it to work.