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의 스타일 모듈화에 대하여 간략하게 알아보았습니다.