SCSS에서만 사용 가능, JS에서는 사용 불가

개발
1

안녕하세요,

지난 1주일 정도 동안 고정된 폰트, 로고, 아이콘을 포함하는 특정 브랜드를 위한 Discourse 설정을 스타일링하고 있습니다.

처음에는 제가 가져온 자산(assets 폴더에 배치하고 about.json의 assets 객체에서 가져온 것)이 즉시 SCSS 변수로 사용 가능해졌지만, settings.theme_uploads에 표시되는 데는 1~2분 정도 걸렸습니다.

하지만 지금은 settings.theme_uploads에 전혀 표시되지 않아 JavaScript에서 사용할 수 없습니다. 자산을 삭제해도 설정 객체에는 여전히 남아 있습니다. SCSS 사용에는 영향이 없습니다.

도움을 주시면 감사하겠습니다.

2

네, 저도 이 부분에서 좀 혼란스러웠어요.

return settings.theme_uploads.blah 같은 참조를 JavaScript에서 언제 사용할 수 있나요? 아예 불가능한 건가요?

저는 계산된 속성(computed property)에서 settings.theme_uploads가 "undefined"로 반환되고 있어요 (최소 처음에는요).

여기서 올바른 패턴은 무엇인가요?

3

settings.theme_uploads 데이터는 비교적 최근(OP가 작성된 후일 것으로 생각됩니다)에 JavaScript에 추가되었습니다. 저희 테마/컴포넌트에서 이를 사용하고 있으므로 신뢰할 수 있어야 합니다. 어떤 문제가 발생하는지 좀 더 자세히 설명해 주실 수 있나요?

4

아, 자산 경로에서 assets 폴더를 누락했었네요. 그래서 깨진 링크가 자산을 “최적화”(제거)한 것이 분명합니다:

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

은 다음과 같았어야 합니다:

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

아, 실수했네요!

참고로 저는 Ember Component에서 JavaScript를 통해 이 자산을 참조하고 있습니다. 예:

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

경로가 올바르지 않으면 undefined 오류가 발생했습니다!

기회를 주셔서 감사합니다! @david, 시간을 낭비하게 해서 죄송합니다.

@hakonbja, 문제를 해결하셨나요?