SCSS에서 `@import`는 어떻게 작동하나요?

[Question42]

안녕하세요, 포럼에 여러 주제로 스팸을 하고 싶지 않아서, 디스코urs 포럼의 신규 사용자/멤버로서 주요 질문 4가지를 여기에 올립니다:

1) 웹사이트에서 소셜 미디어의 모든 흔적을 제거할 수 있는 방법이 있나요?

디스코urs에 기본으로 내장된 것인지, 아니면 테마에 따라 달라지는 것인지는 잘 모르겠지만, 소스 코드를 보면 각 페이지에서 View Source를 하면 Twitter가 5번, FaceBook이 1번 언급되어 있습니다. 내용은 다음과 같습니다:

<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />

그리고 <div class="hidden" id="data-preloaded" data-preloaded= 아래에서 FaceBook에 대한 언급은 \"facebook_app_id\"입니다. 제 사이트는 프라이버시를 극도로 중시하므로, 이런 것들이 사이트에 남아 있는 것은 좋은 인상을 주지 않습니다.

Remove All Traces of Social Media On My Website? 에서 다시 질문했습니다.

2) SCSS에서 @import는 어떻게 작동하나요? Air Theme을 커스터마이징하려고 시도하면서, GitHub 페이지에서 데스크톱용 CSS가 다음과 같다는 것을 확인했습니다:

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

그래서 제 테마를 만들고 제 테마의 Edit CSS/HTML → Desktop 섹션에 이를 포함하려고 시도했지만, 해당 항목을 저장하려고 했을 때 다음과 같은 오류가 발생했습니다:

그리고 아무리 생각해 봐도 @import가 작동하는 방법을 도저히 모르겠습니다. 심지어 디스코urs 설치 환경인 제 VPS 서버에 들어가서 "scss"라는 폴더를 만들고, 해당 코드가 가져오려고 하는 파일들을 그 안에 넣고 포럼을 재시작해 봤지만 여전히 작동하지 않았습니다.

3) VPS 서버가 재부팅되면 포럼이 자동으로 다시 실행되도록 설정할 수 있나요? 서버는 Ubuntu 22.04입니다. 조사하면서 이 포럼에서 이 답변을 찾았지만, 설명대로 해 봤는데 설치 페이지에 그 댓글이 제안하는 것처럼 관련 지시 사항이 보이지 않습니다. 제가 눈이 먼 것 같습니다.

4) 포럼 전체를 아래로 조금 이동할 수 있는 방법이 있나요? 데스크톱에서는 괜찮아 보이지만, 모바일에서는 이 게시물 아래 댓글에 있는 상단 부분처럼 보입니다(신규 사용자는 apparently 게시물당 스크린샷 1개만 추가할 수 있으므로). 둥근 모서리가 상단 바에 닿아 있습니다…

테마 CSS의 Head 섹션에 <br> 태그를 추가해 봤지만, 그러면 상단 내비게이션 바를 포함하여 모든 것이 아래로 이동했습니다. 상단 내비게이션 바는 최상단에 그대로 두기를 원합니다.

지금은 이게 제 질문 전부인 것 같습니다. 감사합니다.

[Question42]

위 #4에 관하여, 제가 언급했던 스크린샷은 다음과 같습니다:

[Arkshine]

안녕하세요, Meta에 오신 것을 환영합니다

1. 질문에 대한 답변은 없습니다. 하지만 제가 틀렸을 수도 있습니다. 여기서는 OpenGraph 메타 태그와 facebook_app_id가 개인정보 보호 문제가 아니라고 생각합니다. 다른 누군가가 더 좋은 통찰력을 줄 수 있기를 바랍니다.

2. 리모트 테마를 생성하지 않았습니다. 이 테마는 GitHub 저장소에 있습니다. scss 디렉터리에서 CSS를 여러 파일로 나누는 것과 같은 파일을 생성할 수 있습니다. 그러면 @import가 자동으로 해당 디렉터리를 참조합니다.

   관리자에서 수동으로 테마를 생성하는 경우 이렇게 할 수 없습니다.

   리모트 테마를 사용자 정의하려면 테마 컴포넌트를 생성하고 Air 테마에 연결한 후 원하는 CSS를 추가할 수 있습니다. 이 파일들을 가져오기 위해 이 작업은 필요하지 않습니다. 그러나 사용자 정의에 SCSS 함수/믹신이 필요한 경우 복사해야 할 수 있습니다(예: discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

   테마에 대한 자세한 정보는 다음을 참조하세요: Developing Discourse Themes & Theme Components

3. Falco가 말했듯이, 표준 설치를 따르는 경우 기본적으로 재부팅 시 Docker가 항상 시작됩니다. 이는 기본 동작이므로 찾을 수 있는 지침이 없습니다. 재부팅 시 포럼이 시작되지 않았는지 확인해 주시겠습니까?

4. 먼저, 안전 모드 활성화 시 모든 것이 제대로 표시됩니까? 이것이 사용자 정의와 관련이 없는지 확인하기 위함입니다. 이는 문제를 파악하는 첫 번째 단계가 될 것입니다.

[Question42]

답변 감사합니다. 4번 항목은 CSS 문제 같은 것 같아서, 모바일 사이트가 지저분해 보이지 않도록 간격을 어떻게 추가해야 할지 잘 모르겠습니다. 세이프 모드를 켜서 1번 옵션의 체크를 해제한 상태에서도 여전히 문제가 발생합니다.

1번 항목에 대해서는, 엄밀히 말해 "개인정보 문제"는 아닐 수 있지만, 어디에도 소셜 미디어 관련 언급이 나오지 않는 것이 좋습니다.

2번 항목: 아, 그렇군요. 흥미롭네요… 5시간 전에 편집하던 컴포넌트에서 그렇게 하긴 했지만, 테마에서는 그렇게 작동하는지 몰랐습니다. 바로 시도해 볼게요.

음… VPS가 부팅되었을 때 Docker가 자동으로 시작되지 않았는데, 이상하네요.

[thoka (Thomas Kalka)]

@Question42

안녕하세요, 포럼에 여러 주제로 스팸을 보내고 싶지 않아서, 신규 Discourse 포럼 사용자/멤버로서 주요 질문 4가지를 여기에 올립니다:

음. 더 많은 사람들이 이 경로를 따르게 되면, 포럼에 사용 불가능한 제목의 스레드로 가득 차 스팸이 될 것입니다.

[JammyDodger]

@Question42 님, 이슈별로 하나의 주제(토픽)를 만들어 주시는 것이 가장 좋습니다. 이렇게 하면 주제 제목이 훨씬 더 관련성이 높아질 뿐만 아니라, 다른 사람들이 의견을 나누기 쉬워지고, 나중에 비슷한 내용을 검색하는 사람들에게도 훨씬 명확해집니다.

[Question42]

2번 항목에 대해 두 번째 코멘트를 간단히 남깁니다:
그래서 저는 Air 테마를 포크해서 제대로 수정한 뒤, 제 저장소에 업로드하고, 관리자 패널의 테마 섹션에서 GitHub 링크로 설치했습니다… 그런데 이제 비로컬 테마가 되었기 때문에 CSS/HTML에 접근할 수 없어요. 이 문제를 어떻게 해결할 수 있을까요? 아니면 당신이 언급한 컴포넌트 방식을 반드시 사용해야 하나요?

GitHub에서 가져온 테마로 로컬 CSS/HTML을 편집할 방법이 없나요? 적어도 로컬에서는 관리자 패널에서 CSS/HTML을 쉽게 편집할 수 있었지만, @import 관련 작업만은 할 수 없었거든요. 그런데 이제 당신이 말한 원격 방식을 사용하니 @import 코드를 추가하기 위해 테마를 편집할 수 없는데, 이게 원래 목적이었거든요.

[bryce (Bryce Huhtala)]

#4에 관하여:
.list-controls 클래스에 상단 여백을 추가해 볼 수 있습니다.

// 모바일 CSS
.list-controls {
  margin-top: 1rem;
}

[Question42]

그러니까, 제 mobile.scss 파일에서 .list-controls에 대한 언급은 다음 부분뿐입니다:

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }

어느 부분에 제 코드를 넣어야 하나요?

[bryce (Bryce Huhtala)]

첫 번째 선택자 안에 넣을 수도 있습니다.
또 다른 옵션은 이 부분:

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
}

을 다음과 같이 다시 작성하는 것입니다:

.list-controls {
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

그런 다음 .nav-pills 부분 앞에 .list-controls에만 영향을 미치는 새로운 선언을 배치할 수 있습니다.

[Question42]

그렇다면 전체를 다음과 같이 보이게 하려면

.list-controls {
  margin-top: 1rem;
}

을 추가하면 되나요?

.list-controls {
  margin-top: 1rem;
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }

?

[bryce (Bryce Huhtala)]

맞아요! 하지만 마지막에 }가 하나 더 필요한 것 같습니다.

[Question42]

자, 이게 모바일에서 나오는 결과입니다:

불행히도 이제 Top/Reply/Activity 바/영역이 게시물에 닿지 않게 되었고, “Latest” 탭은 이제 상단 바에 닿게 되었습니다. Top/Reply/Activity 영역은 여전히 게시물 영역에 닿게 하되, “Latest” 드롭다운 박스는 상단 바에 닿지 않게 할 수 있을까요?

처음부터 엉망진창이었지만, 원래 스크린샷에 보인 것처럼 “Latest” 영역이 Topic 영역과 합쳐져 있는 모습은 괜찮아 보였습니다:

수정: 아, 진짜… 친구에게 자기 폰(iPhone 13)으로 사이트를 확인해 달라고 했는데, 친구 폰에서는 사이트가 엉망이 되어 있네요, ㅋㅋ…음 제 폰에서는 "정상"으로 보입니다(위 스크린샷, 제가 원하는 수정 사항 제외). 친구 폰에서는 일반 모바일 뷰는 정상이지만, 폰에서 데스크톱 모드를 켜면 전부 엉망이 됩니다

[bryce (Bryce Huhtala)]

음, 테마에 어떤 다른 스타일들이 영향을 미치고 있는지 정확히 파악하기가 어렵네요. 아직 확인하지 않으셨다면 이 가이드를 살펴보는 것을 추천합니다. 특히 브라우저 검사기(Dev Tools – Chrome에서는 F12로 접근)를 사용하는 부분을 꼭 보세요. 이를 통해 각 요소에 어떤 스타일이 적용되고 있는지 확인하고, 실시간으로 차이를 보기 위해 스타일을 켜고 끌 수 있습니다.

모바일 뷰와 관련이 있으므로 대부분의 브라우저에서 데스크톱으로 모바일을 시뮬레이션할 수 있습니다. Chrome에서 해당 버튼의 모습은 다음과 같습니다:

[Firepup650 (Firepup Sixfifty)]

@Question42

폰에서 데스크톱 모드를 쓰면 모든 게 엉망이 돼요

그럴 수 있죠? 데스크톱 모드는 원래 모바일 기기를 위한 것이 아니니까요.