일부 테마를 검토하던 중 모바일 스타일에서 선언문이 이제 코어 선언문에 의해 덮어쓰인다는 사실을 발견했습니다.
mobile/mobile.scss 파일에서 규칙을 직접 선언하면 우선순위가 적용되어 정상적으로 반영됩니다. 하지만 mobile.scss에서 @import를 사용하면 가져온 선언문은 덮어쓰입니다.
예를 들어, 테마에 있는 몇 가지 @import된 선언문이 현재 코어의 선언문에 의해 덮어쓰이는 경우:
#list-area { background: xxx;}
body { background-color: xxx;}
음, 놀랍네요. 모바일이든 데스크톱이든 테마 스타일시트는 코어 스타일시트보다 나중에 로드되도록 설정되어 있습니다. 다음을 참고하세요:
다른 문제가 없는지 확인해 보셨나요? 예를 들어 셀렉터 우선순위 문제 같은 것 말입니다. 코어가 더 구체적인 셀렉터를 포함하도록 업데이트되는 경우가 많은데, 이렇게 되면 원래 셀렉터를 사용하던 테마에서 문제가 재발할 수 있습니다.
구체성(specificity) 문제였던 것은 아닙니다. 동일한 선언문을 mobile.scss와 @import를 사용하는 mobile.scss 사이에 정확히 교체해 봤는데, 하나는 적용되고 다른 하나는 브라우저 인스펙터에서 덮어쓰기되었거든요.
하지만 지금은 재현이 안 됩니다! 다시 시도해 보기 위해 mobile.scss만 있는 빈 컴포넌트를 새로 만들어 봤는데, 양쪽 방향으로 선언문이 모두 적용되고 있습니다.
잘못 보고한 점 죄송합니다! 다만 이전에 어떤 원인이었는지 전혀 모르겠네요.. 다른 브라우저에서도 같은 현상이 있었거든요..
걱정 마세요! 아마도 특정 조건 하에서 이런 일이 발생하는 것일 수 있어요…