Assets only available to SCSS not JS

dev
1

Hello,

For the last week or so I’ve been styling a Discourse setup for a brand which includes fixed fonts, logos and icons.

To begin with I noticed that any assets I imported (place in assets folder and import under the assets object of about.json) became immediately available to use as a SCSS variable but took a minute or two to show up in settings.theme_uploads.

Now however, they don’t show up at all in settings.theme_uploads which means I can’t use them in my JavaScript. If I remove an asset it also stays in the settings object. The SCSS usage stays unaffected.

Help would be greatly appreciated.

1 Like
2

Yeah, I’m a bit confused by this too.

At what point is it safe to use a reference like return settings.theme_uploads.blah in javascript if ever?

I’m getting “undefined” for settings.theme_uploads in my computed property (initially at least).

What’s the right pattern here?

1 Like
3

The settings.theme_uploads data was added to javascript relatively recently (after the OP was written, I think). It should be reliable - we use it in our own themes/components. Can you explain in more details what issues you’re seeing?

3 Likes
4

Ah, I was missing the assets folder in my path to the asset, so the broken link had “optimised out” the asset no doubt:

{
  "name": "Cool Theme Component",
  "about_url": "",
  "component": true,
  "assets": {
    "background": "background.png"
  }
}

should have been:

{
  "name": "Cool Theme Component",
  "about_url": "",
  "component": true,
  "assets": {
    "background": "assets/background.png"
  }
}

Doh!

FYI I’m reference this in Javascript in an Ember Component, e.g.:

  @computed
  backgroundImage() {
    return settings.theme_uploads.background;
  }

That would raise an undefined error when the path is incorrect!

Thanks for listening! @david, sorry to waste your time.

@hakonbja did you solve your issue?

2 Likes