그다음에는 utils.scss 파일을 열고 물결 표시를 사용하여 라이브러리를 불러오세요. 다음 두 줄을 코드 상단에 넣어 주면 됩니다.

utils.scss

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

---

 

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

이제 방금 불러온 include-media와 open-color를 SassComponent.scss에서 사용해 보겠습니다. 해당 스타일 파일을 다음과 같이 수정해 보세요.

SassComponent.scss

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

---