[React] node_modules에서 라이브러리 불러오기

Sass는 라이브러리를 쉽게 불러와서 사용할 수 있다.

yarn을 통해 설치한 라이브러리를 사용하는 가장 기본적인 방법은 상대 경로를 사용해 node_modules까지 들어가서 불러오는 것이다.

@import '../../../node_modules/library/styles';

하지만 이런 구조는 스타일 파일이 깊숙한 디렉터리에 위치할 경우 ../를 많이 적어야 해서 번거롭다. 이보다 더 쉬운 방법이 물결 문자(~)를 사용하는 방법이다.

@import '~library/styles';

물결 문자를 사용하면 자동으로 node_modules에서 라이브러리 디렉터리를 탐지해 스타일을 불러올 수 있다.

(+) Sass 라이브러리를 불러올 때
node_modules 내부 라이브러리 경로 안에 들어 있는 scss 파일을 불러와야 한다. 보통 scss 파일 경로가 어디에 위치하고 있는지 라이브러리 공식 매뉴얼에서 알려 주지 않을 때가 많으니, 직접 경로로 들어가서 확인하는 게 좋다.

• 예제
  불러온 include-media와 open-color를 SassComponent.scss에서 사용해보자. 해당 스타일 파일을 다음과 같이 수정하라.

  • utils.scss

    @import '~include-media/dist/include-media';
    @import '~open-color/open-color';
    (...)

  • SassComponent.scss

    .SassComponent {
    display: flex;
    background: $oc-gray-2;
    @include media('<768px') {
      background: $oc-gray-9;
    }
    (...)
    }

    
    SassComponent의 배경색을 open-colors 팔레트 라이브러리에서 불러온 후 설정하고, 화면 가로 크기가 768px 미만이 되면 배경색을 어둡게 바꿔준다. 코드를 저장하고 나면 다음과 같은 결과물을 볼 수 있다.