개발/HTML, CSS

[CSS/SCSS] SCSS에서 CSS 변수 중복 적용 문제 해결하기

이나당 2025. 3. 26. 08:05

문제

React 프로젝트에서 SCSS를 사용할 때, common.scss 파일에 CSS 변수도 선언하고 여러 파일에서 불러오는 구조를 만들었다.

하지만, 개발자 도구에서 확인해보니 같은 스타일이 여러 번 중복 로드되는 문제가 발생!!!! 

 

이로 인해 CSS 변수가 페이지마다 중복 선언되는 문제가 발생했다.

// 기존의 common.scss
:root {
    --btn-green-border: none;
    --btn-yellow-border: none;
    /* (이런 변수들이 반복됨...) */
}


[data-theme=light]{
...
}

...그외 scss 공통함수들이 있었다

 

그로인해 아래처럼 똑같은 변수선언이 여러개가 생겨서 스크롤이 엄청 쌓이게 되어버린..

원인: SCSS @use의 동작 방식 

 

SCSS의 @use는 파일을 독립적으로 불러와서 중복 로드를 방지하는 기능이 없다. 그렇기에 어떤 파일에서 @use를 했든 간에, 사용한 곳마다 새롭게 로드가 된다.

 


시도1

그래서 scss안에 css변수들을 global.scss라는 파일로 분리를 해봤지만 문제가 똑같았다.

 

css와 scss 파일을 분리했으나 중복 문제를 일으킨 원인

1. global.scss파일을 만든후 CSS 변수를 해당 파일로 옮기고,

2. common.scss에서 @use './global.scss';로 불러오고,

3. 개별 스타일 파일(예: patient.page.scss)에서 @use '../common.scss';를 하였다.

결과 => common.scss가 다시 불러질 때마다 global.scss가 중복 로드됨. === 똑같음

 

 

// common.scss에서 global.scss를 사용함 (이러면 중복됨!!!!)
@use './global.scss';

@function dp($n) {
  @return calc($n / 16 * 1rem);
}

시도1의 파일. 이렇게 하면 common.scss가 불러와질 때마다 결국 global.scss도 함께 불러와지게 된다.

 

 

 

// patient.page.scss
@use '../common.scss';  // common.scss에서 global.scss를 가져옴 (1번 로드)

// 다른 파일에서도 common.scss를 사용
@use '../common.scss';  // common.scss에서 global.scss를 또 가져옴 (2번 로드)

즉, common.scss를 여러 SCSS 파일에서 @use하면, global.scss도 중복 로드..

 

 

 

 

 

시도2

global.scss를 딱 한 번만 로드하기

global.scss를 오직 index.scss에서만 한 번 불러오고, common.scss에서 따로 global.scss를 불러오지 않도록 수정했다.

 

 

// global.scss ( !!어디에서도 @use하지 않음)
:root {
  --base-font-size: 1rem;
  --btn-green-border: none;
  --btn-yellow-border: none;
}

[data-theme='light'] {
  --bg-color: #fff;
}

[data-theme='dark'] {
  --bg-color: #000;
}
// common.scss (SCSS 변수와 함수만 포함 위에 @use 사용 X)
@function dp($n) {
  @return calc($n / 16 * 1rem);
}
// index.js (여기서만 global.scss를 불러옴)
export * from './common.scss'
export * from './components'
export * from './default.scss'
export * from './global.scss' // 여기에서 한 번만 불러옴
export * from './pages'
// 개별 페이지 스타일 (patient.page.scss)
@use '../common.scss' as common;

.PatientPage {
  background-color: var(--bg-color);
}

global.scss는 index.scss에서 한 번만 불러오므로 더이상 중복 적용되지 않는다.

 

 

지금 생각해보면 당연히 한곳에서만 불러오면 된다.

뭔가 해결법이 간단했는데, 생각이 꼬여가지고 굳이 분리한 파일을 다시 @use 해서 가져온 이상한 시도를 했던 경험 @.@

반응형