VueJS에서 style을 선언하는 방법 중 아래처럼 컴포넌트에 css style을 모듈화하여 사용하는 방법이 가능합니다. 이와 같은 방법은 앱 전체보다는 특정 기능의 컴포넌트 작성시 디펜던시를 최소화하는 장점이 있습니다. 그럼 아래의 코드를 먼저 봐주세요.
# vueJS 스타일 모듈화 적용하기
아래 코드는 vue 컴포넌트에 사용된 style 요소로 module을 추가하여 사용하였습니다. 이처럼 모듈화를 위해서 module 어트리뷰트를 추가하도록 합니다.
위의 스타일에는 box 이름의 클래스에 border 스타일을 적용하도록 작성된 코드입니다. 이제 view가 사용될 태그에 :class 디렉티브를 사용하여 style을 가져와보도록 하겠습니다.
모듈화된 스타일을 $style 키워드를 사용하여 view 템플릿으로 바로 가져올 수 있습니다. 아래의 div 태그 요소를 보면 :class를 사용하여 적용되었습니다.
이제 위의 div 태그는 모듈화된 스타일인 box를 가져와 적용하게 됩니다. 이처럼 사용 방법은 매우 간단합니다. 정리하자면 중요한 부분은 아래와 같죠.
여기까지 vuejs의 스타일 모듈화에 대하여 간략하게 알아보았습니다.
# vueJS 스타일 모듈화 적용하기
아래 코드는 vue 컴포넌트에 사용된 style 요소로 module을 추가하여 사용하였습니다. 이처럼 모듈화를 위해서 module 어트리뷰트를 추가하도록 합니다.
<style module>
.box {
border: 10px solid black;
}
</style>
.box {
border: 10px solid black;
}
</style>
위의 스타일에는 box 이름의 클래스에 border 스타일을 적용하도록 작성된 코드입니다. 이제 view가 사용될 태그에 :class 디렉티브를 사용하여 style을 가져와보도록 하겠습니다.
모듈화된 스타일을 $style 키워드를 사용하여 view 템플릿으로 바로 가져올 수 있습니다. 아래의 div 태그 요소를 보면 :class를 사용하여 적용되었습니다.
<div :class="$style.box">
...
</div>
...
</div>
이제 위의 div 태그는 모듈화된 스타일인 box를 가져와 적용하게 됩니다. 이처럼 사용 방법은 매우 간단합니다. 정리하자면 중요한 부분은 아래와 같죠.
- style에 module 어트리뷰트 적용
- 보여질 태그 요소에 :class 디렉티브 값으로 $style 방식으로 사용
여기까지 vuejs의 스타일 모듈화에 대하여 간략하게 알아보았습니다.
[VueJS] v-cloak 사용하는 방법, 감추기
해당 카테고리 최신 글
- 1. Vue2 텔레포트 기능 구현하기, Teleport, portal-vue
2. [VueJS] 커스텀 디렉티브 v-visible 만들기. visibility- 3. [NuxtJS] axios timeout 기본값 설정하는 방법
- 4. Vuex store에서 commit, dispatch 메소드를 전역으로 실행하는 방법
- 5. [VueJS 에러 해결] script 및 style 태그 컴포넌트에서 사용시 에러 해결 방법은?
- 6. [VueJS] scoped css를 이해하기 및 예제보기
7. [VueJS] v-slot을 사용하여 컴포넌트에 템플릿 추가하는 방법과 slot exist 확인하기