[JS][TS][SCSS] JS/TS에서 CSS 변수 사용하기

이전 글에서 CSS에서 변수 사용하는 것을 다룬 적이 있다. 글에서 사용한 방법은 다른 CSS 파일에서 변수를 가져다가 사용할 수 있게 된다.

오늘 포스팅에서는 자바 스크립트 파일에서 사용하는 것에 대해서 소개하고, 타입 스크립트일 경우에는 모듈을 포함하는 걸 추가로 작성하려고 한다.
과정을 요약하면 CSS에서 변수를 export하고, JS/TS 파일에서 import하여 사용하는 간단한 과정이다.

CSS에서 변수 선언 및 export하기

첫 번째로는 CSS에서 변수를 정의한 후에, export를 해주어야 한다. 다음과 같이 사용하면 된다.

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:root {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

위 예시에서 $theme-colors라는 변수에 각 변수를 선언하였고, 다른 CSS 파일에서 사용할 수 있게 root에도 등록하고, JS/TS 파일에서 import할 수 있도록 export에도 등록하였다. @each-in문은 SCSS(SASS)에서 반복문이다.
참고로 CSS 변수 내에서 nested 변수(ex. theme-colors['nested-colors']['test])는 지원되지 않는다.

JS/TS에서 import하기

위에서 export해준 변수를 import한다. 방법은 간단한다.

import colors from '@/assets/colors.scss'

console.log(colors)
console.log(colors.someColor)

다른 JS 파일을 import 하듯이 사용하면 되고, 객체의 property들로 존재하기 때문에 접근하여 사용할 수 있다.

ts config에서 SCSS 인식하도록 설정하기

(아마 CSS도 동일하게 동작할 것 같긴 한데, 적용을 SCSS로 해봐서 SCSS 기준으로 작성)

타입 스크립트에서 위처럼 import할 경우, Cannot Find Module가 나올 때가 있다. 분명 파일도 존재하고, 실제로 찍어보면 잘 가져오기도 하는데 에러가 발생한다.

이유는 ts config에서 scss 파일들을 인식하도록 설정하지 않았기 때문이다.

// declaration.d.ts
declare module '*.scss';

이렇게 모듈을 선언 해준 뒤에,

{ 
  "include": ["./declaration.d.ts"] 
}

tsconfig.json에서 포함해주면 정상적으로 동작함을 확인할 수 있다.