프로젝트 작업이 완료되어 최종 완성본을 빌드하게 되면 작업했던 모든 파일들이 합쳐지게 되는데, 이때 특정 컴포넌트에 적용한 스타일이 내가 의도하지 않았지만 다른 컴포넌트에 영향을 미치게 될 수 있습니다.
그것을 방지하기 위하여 style 태그에 scoped 속성을 추가하는 것으로 특정 컴포넌트의 구성요소에만 스타일을 적용 할 수 있습니다.
1. Scoped 속성의 사용 방법
(1) style 태그에 scoped 속성을 추가해줍니다.
<style scoped>
.example {
color: red;
}
</style>
(2) 범위가 지정된 스타일과 범위가 지정되어 있지 않은 스타일을 동시에 사용할 수 있습니다.
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
(3) 하위 컴포넌트(자식 구성 요소)에 영향을 미치게 하기 위해선 ::v-deep 결합자를 이용할 수 있습니다
(::v-deep 대신 >>> 를 이용해도 되지만 Sass 등 전처리기가 인식하지 못하는 경우가 있다고 하니 v-deep만 사용하시면 될 거 같습니다만, 애초에 범위를 지정하기 위해서 사용하는 scoped 속성이기에 매우 예외적인 상황이 아니라면 굳이 쓸 일이 있을까... 싶습니다)
<style scoped>
.a::v-deep .b { /* ... */ }
</style>
2. Scoped 속성의 동작 원리
예)
RedCard.vue 라는 빨간색 상자와 BlueCard.vue라는 파란색 상자를 만들어 보았습니다.
클래스 이름은 동일하게 card라고 지정해주고 스타일에 scoped 속성을 추가하였습니다.
// RedCard.vue
<template>
<div class="card">
RedCard
</div>
</template>
<script>
export default {
name: 'RedCard'
};
</script>
<style scoped>
.card {
display: flex;
width: 200px;
height: 200px;
background: red;
justify-content: center;
align-items: center;
border : 2px solid black;
margin: 1em;
}
</style>// BlueCard.vue
<template>
<div class="card">
BlueCard
</div>
</template>
<script>
export default {
name: 'BlueCard'
};
</script>
<style scoped>
.card {
display: flex;
width: 300px;
height: 300px;
background: blue;
justify-content: center;
align-items: center;
border : 2px solid black;
margin: 1em;
}
</style>
위 내용을 실행시킨 후, 개발자 모드로 확인을 해보면 scoped 속성을 적용시킨 부분은 data-v-[고유한 랜덤 값]이 지정되어있는 형식으로 자동으로 변환됩니다.
이러한 식으로 scoped가 지정된 곳에는 고유한 값을 지정하여 모든 CSS는 이 고유한 값을 가지고 있어야만 적용이 되게 됩니다.
