안녕하세요,
원격 테마를 사용하여 새로운 border-radius 변수를 오버라이드해 보았지만, 코어의 :root 변수가 항상 우선순위가 높아지는 것 같습니다. 관리자에서 테마 컴포넌트를 생성하면 이 변수들을 오버라이드할 수 있습니다. 테마를 통해 이 변수들을 오버라이드하는 방법이 있을까요? 제가 놓치고 있는 부분이 있을까요? 
이 작은 변경사항이 정말 유용합니다. 감사합니다! 
아, 예상대로 작동하네요. 제 테스트 사이트가 장난을 치고 있었어요.
아, 장난이 아니었네요 
원격 테마(remote theme)를 사용할 때는 !important를 사용해야만 오버라이드할 수 있습니다.
이렇게 사용하는 경우 
$border-radius: 2em !important;
:root {
--d-button-border-radius: #{$border-radius};
--d-input-border-radius: #{$border-radius};
}
그렇지 않고 이렇게 시도해 보면
:root {
--d-button-border-radius: 2em;
--d-input-border-radius: 2em;
}
코어 :root 변수들이 우선순위를 갖게 됩니다.
무엇을 놓치고 있는 건가요? 
감사합니다!
테마에서 테스트하면 작동합니다… 예상대로 코어 루트가 테마 루트에 의해 덮어씌워집니다.
더 많은 정보를 보여줄 수 있나요? 루트를 어디서 정의하고 있나요? 인스펙터는 어떻게 보이나요?
찰리님, 안녕하세요.
확인해 주셔서 감사합니다.
scss/custom-variables.scss 파일에 추가하고 common.scss에 가져오는 방법을 시도해 보았습니다. 또한 common.scss에 직접 추가하는 방법도 시도해 보았습니다.
지금 보니, 테마에 다른 컴포넌트(관리자 화면에서 생성된 것)가 할당되어 있지 않은 경우에는 작동합니다. 관리자 화면에서 일반(Common) 섹션에 일부 CSS가 포함된 컴포넌트를 생성하면, 코어 루트 변수가 제게는 오버라이드되지 않습니다.
테마에 컴포넌트가 없거나, 컴포넌트의 일반 / CSS가 비어 있는 경우에는 작동합니다.
일반 / CSS가 포함된 컴포넌트를 생성하고 테마에 활성화하면,
제 환경에서는 작동하지 않습니다.
d-default-border-radius와 d-select-body-border-radius는 커스텀 변수입니다.
도움 주셔서 감사합니다!
알겠습니다. 매우 흥미롭네요. 명확한 단계들을 알려주셔서 감사합니다.
어떤 해결책을 생각해볼지 확인해 보겠습니다. 현재로서는 이미 사용하고 계신 !important를 대체할 다른 해결책이 있을지에 대해 회의적이지만, 왜 이런 방식으로 동작하는지 이해하는 것은 도움이 될 것 같습니다.
음, 네, 재현이 가능하네요… 조금 이상하네요.
리모트 테마를 하나 가지고 있는데, 모든 common.scss 파일에는 다음 내용만 포함되어 있습니다:
:root {
--d-border-radius: 100px;
}
이렇게 하면 잘 동작하며, 버튼과 다른 요소들에 둥근 모서리가 적용됩니다:
CSS가 포함된 로컬 테마 구성 요소를 추가하면 문제가 발생합니다. common.scss에 다음 내용만 포함된 로컬 테마 구성 요소를 만들었습니다:
body {
background: red;
}
빨간 배경색은 적용되지만, 둥근 모서리가 사라집니다:
같은 구성 요소를 리모트로 사용하면 정상적으로 동작합니다. 빨간 배경색과 둥근 모서리가 모두 적용됩니다.
이 문제는 모든 테마 CSS 파일에 variables.scss를 주입하는 우리의 마법 같은 동작과 관련이 있을 것 같습니다. 현재 variables.scss에는 다음과 같은 코드가 있습니다:
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
}
이 SCSS 파일을 모든 테마 및 플러그인 SCSS 파일에 주입하기 때문에, 이 코드가 반복적으로 출력됩니다:
현재 이 값을 오버라이드하려면 오버라이드 코드를 마지막 테마 스타일시트에 추가해야 합니다. 그렇게 해야만 가장 마지막에 출력되니까요.
핵심에서 variables.scss 밖의 전역 위치에 이 :root 선언을 이동해야 한다고 생각합니다.
아하! 정말 감사합니다. 왜 그런 값들이 반복되는지 제대로 파악하지 못하고 완전히 놓치고 있었네요.
이 내용을 다른 파일로 이동시켜 반복이 일어나지 않도록 했고, 문제가 해결되었음을 확인했습니다.
