VueJS에서 style을 선언하는 방법 중 아래처럼 컴포넌트에 css style을 모듈화하여 사용하는 방법이 가능합니다. 이와 같은 방법은 앱 전체보다는 특정 기능의 컴포넌트 작성시 디펜던시를 최소화하는 장점이 있습니다. 그럼 아래의 코드를 먼저 봐주세요.



# vueJS 스타일 모듈화 적용하기
아래 코드는 vue 컴포넌트에 사용된 style 요소로 module을 추가하여 사용하였습니다. 이처럼 모듈화를 위해서 module 어트리뷰트를 추가하도록 합니다.
<style module>
  .box {
     border: 10px solid black;
  }
</style>

위의 스타일에는 box 이름의 클래스에 border 스타일을 적용하도록 작성된 코드입니다. 이제 view가 사용될 태그에 :class 디렉티브를 사용하여 style을 가져와보도록 하겠습니다.

모듈화된 스타일을 $style 키워드를 사용하여 view 템플릿으로 바로 가져올 수 있습니다. 아래의 div 태그 요소를 보면 :class를 사용하여 적용되었습니다.
<div :class="$style.box">
  ...
</div>

이제 위의 div 태그는 모듈화된 스타일인 box를 가져와 적용하게 됩니다. 이처럼 사용 방법은 매우 간단합니다. 정리하자면 중요한 부분은 아래와 같죠.

  • style에 module 어트리뷰트 적용
  • 보여질 태그 요소에 :class 디렉티브 값으로 $style 방식으로 사용

여기까지 vuejs의 스타일 모듈화에 대하여 간략하게 알아보았습니다.