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

Sass의 사용 장점은 라이브러리를 쉽게 불러와 사용할 수 있다는 점입니다. scss 파일 내부에서 yarn을 통해 설치한 라이브러리를 사용하는 방법은 아래와 같습니다. 스타일 파일의 깊이가 깊어지면 많은 ../ 을 적어 주어야 합니다.

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

~(tilde) 를 사용하면 알아서 node_modules 내부에서 라이브러리를 탐지하여 스타일을 불러올 수 있습니다.

@import '~library/styles';

아래는 유용하게 사용되는 두 라이브러리 include-media 와 open-color 에 대한 소개입니다. include-media 모듈은 반응형 디자인을 쉽게 할 수 있도록 도와주고, open-color 모듈에는 다양한 색상들이 미리 정의되어 있습니다.

먼저 사용을 위해 두 모듈을 설치합니다.

$ yarn add include-media open-color

opencolor 모듈의 변수들로 색상을 지정하고, include-media 모듈의 media 믹스인 사용으로 반응형을 구현한 모습을 볼 수 있습니다.

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

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

출처 - 리액트를 다루는 기술