어제 업데이트(호스팅 서버 https://doomemacs.discourse.group) 이후로 내 사용자 지정 CSS가 전혀 적용되지 않습니다. 테마나 컴포넌트의 CSS를 수정해도 효과가 없는데(반면 <head>나 다른 HTML 섹션의 변경은 정상적으로 작동합니다).
의심스러운 link 태그가 하나 있는데, 빈 스타일시트로 가리키고 있으며, CSS를 변경할 때마다 해시 값이 바뀝니다. Discourse가 내 스타일시트를 컴파일하는 데 조용히 실패하는 것 같습니다. 에러 로그에 실패에 대한 언급은 없고 discourse_theme가 스타일시트를 아무 문제 없이 업로드하지만, 아무런 효과가 없습니다.
관리자분께서 확인해 주실 수 있으신가요?
확실하지는 않지만, 이 변경 사항 Restrict editing of remote themes 에 걸린 것 같습니다
잘못된 것 같습니다 
@hlissner님, 안녕하세요. 이 문제에 대한 수정 작업을 진행 중입니다. 최근 코어 업그레이드로 인해 해당 인스턴스의 테마 구성 요소가 깨졌습니다. 곧 수정안을 공유하겠습니다.
수정 사항이 이제 코어에 병합되었고 @hlissner 님의 사이트가 배포되었습니다. 참고로 두 가지 테마 구성 요소를 비활성화했습니다. 하나는 사용자 지정 스타일을 가진 구성 요소로(활성화할 수 있습니다), 다른 하나는 discourse-theme-category-homepage입니다. 후자는 활성화하려면 먼저 업스트림에서 업데이트가 필요합니다. 이에 대한 자세한 내용은 Enhanced category-box display component - #7 by pmusaraj 에서 확인하실 수 있습니다.
감사합니다! 이제 스타일시트가 올바르게 로드되지만, SCSS 색상 변수가 제 테마의 색상 스킴을 상속하지 않는 것 같습니다. 예를 들어 $secondary는 #282c34 대신 기본값인 #ffffff를 반환합니다. 이것이 e8b8272에서 발생한 또 다른 회귀(regression) 문제일까요?
네, 또 다른 회귀(regression) 문제입니다. 수정이 좀 까다롭긴 한데… 대부분의 색상 변수의 경우, 테마 컴포넌트는 CSS 커스텀 프로퍼티를 사용해야 합니다. 테마 컴포넌트 내의 특수한 color_definitions.scss 파일에서 커스텀 색상 변형을 추가하는 방법에 대한 개요와 예시를 확인하려면 이 가이드를 참고하세요: Update themes and plugins to support automatic dark mode
진행 상황 알려주세요!
가능한 범위에서는 그렇게 했습니다. 하지만 해당 변수에 접근할 수 없기 때문에 활성 스킴에 따라 색상을 변환할 수 없습니다. 예를 들어 다음과 같습니다.
$primary-low: dark-light-choose(darken($secondary, 12%), lighten($secondary, 10%));
:root {
--primary-low: #{$primary-low};
}
이 문제를 해결하는 더 나은 방법이 있을까요? 각 테마에 스타일을 직접 추가할 수는 있지만, 테마가 많을 예정이라 가능한 한 중앙의 전역 컴포넌트에서 일반적인 경우를 처리하고 싶습니다.
네, 맞는 말씀이네요. 해당 SCSS를 common/color_definitions.scss에 있는 새 파일 위에 추가해 보셨나요? 거기에 추가하시면 바로 동작해야 합니다. (UI에 해당 특수 스타일시트를 위한 탭도 있습니다.)
방금 그걸 시도하려던 참이었는데, 갑자기 포럼이 The software powering this discussion forum encountered an unexpected problem 오류로 다운되어버렸네요, 하하.
/safe-mode를 통해 사이트에 접근할 수 있으며, 이 모드는 테마와 컴포넌트를 비활성화하여 문제가 발생한 부분을 확인할 수 있습니다.
다만 이 또한 회귀 버그입니다. SCSS 오류 때문에 사이트 전체가 멈추는 일은 없어야 하며, 앞으로 며칠 안에 반드시 수정하겠습니다.
성공했습니다! 색상 변수가 color_definitions.scss의 스코프에 올바르게 설정되어 있습니다. 유일한 문제는 이 파일에서 다른 스타일시트를 가져올 수 없다는 점입니다. 예를 들어 다음과 같은 경우입니다.
// scss/globals.scss
$foo: "#000000";
// color_definitions.scss
@import "globals";
:root { --foo: #{$foo}; }
이 경우 Discourse 오류 로그에 다음과 같은 메시지가 표시됩니다:
SCSS compilation error: Error: File to import not found or unreadable: globals.scss.
on line 129 of color_definitions.scss
>> @import "globals";
다행히 스타일시트를 다시 설계하여 이러한 의존성을 피할 수는 있지만, 큰 문제는 아닙니다. 다만 이 문제를 버그로 볼 수 있을까요?
네, import 문제를 수정하기 위한 PR을 올렸고, 내일까지 머지될 예정이에요.
도와주셔서 감사합니다! PR이 병합되고 인스턴스가 업데이트되었지만, 이제 color_definitions.scss에 스타일시트를 가져올 수 있습니다. 그러나 이번에는 다음과 같은 문제가 다시 발생했습니다:
이번에는 color_definitions.scss 안의 변수에도 영향을 미치고 있습니다.
부모 테마의 SCSS 변수를 상속하지 않고도 하려는 작업을 수행할 수 있을까요? 아주 제한적인 사용 사례이므로 코어에 그런 복잡성을 추가하고 싶지는 않습니다.
가능은 하지만, 일주일 전까지만 해도 필요하지 않았던 테마당 수백 줄의 불필요한 scss(그리고 모든 테마 간 변수를 공유하기 위한 빌드 시스템)가 필요해져서 번거롭습니다. 그렇다고 해도, Discourse의 빌드 프로세스를 향후 리팩터링할 때 발생할 수 있는 문제를 피하기 위해 이렇게 하는 것이 가장 좋을 것 같습니다. 그렇게 하겠습니다. 감사합니다!
더 이상 지원되지 않는다면 이 가이드를 수정하거나 제거해야 하지 않을까요?
그 가이드가 약간 구식이긴 합니다. 다만, 현재 문제가 되는 부분은 코어 변수가 아니라 테마의 색상 스킴을 상속하지 않는 컴포넌트 내의 SCSS 색상입니다. (그래도 가이드를 검토하여 업데이트하겠습니다.)
조금 배경을 설명하자면, 2020년 8월/9월에 우리는 색상에 대해 CSS 커스텀 프로퍼티를 사용하도록 전환했습니다. 이 변경의 주된 이유는 자동 다크 모드를 가볍고 빠르게 지원할 수 있도록 하기 위해서였습니다. 테마에는 CSS와 JS가 포함되어 있어 빠르게 전환할 수 없지만, CSS 커스텀 프로퍼티를 사용하면 페이지를 새로고침하지 않고도 색상 스킴을 즉시 전환할 수 있습니다.
사이트를 확인해 보니 4개의 테마가 각각 색상 스킴을 가지고 있고, 공유 스타일을 위한 컴포넌트가 테마 간에 공유되어 있는 것을 볼 수 있습니다. 하나의 메인 테마(모든 공유 스타일을 포함)와 4개의 사용자가 선택할 수 있는 색상 스킴을 사용하여 사실상 동일한 결과를 달성할 수 있습니다. 메인 테마의 color_definitions.scss 파일로 모든 색상 계산을 이동해야 하지만, 실현 가능합니다. 시간을 내어 내일 시도해 보겠습니다.
그것이 이상적이겠지만, 저는 여러 색상 스키마가 제게 작동하지 않아 현재 구조를 사용하게 되었습니다. 일부 색상 스키마는 --primary-low와 같은 자동 생성 변수에 대해 품질이 낮은 색상을 생성합니다. 변수를 단순히 재정의하면 하나의 색상 스키마에서는 작동할 수 있지만, 다른 스키마에서는 작동하지 않을 수 있습니다. $primary를 기반으로 재정의하거나, 색상 스키마 ID/이름에 따라 조건부로 재정의하는 등 더 일반적인 해결책은 가능합니다. 하지만 그렇게 하지 않는 한 여러 테마가 필요하므로, 테마별 color_definitions.scss를 가질 수 있습니다(피하고 싶은 중복이죠). 제가 놓치고 있는 더 나은 옵션이 있을까요?