[Vue.js] style scoped

vue.js 관련 프로젝트를 하면서 style 태그에 scoped를 추가해서 사용하고 있다.

 

<style scoped>
// style code
</style>

위처럼 scoped를 붙여서 사용하면 현재 스타일 코드를 사용하고 있는 컴포넌트에만 스타일이 적용된다.

반대로 scoped가 없다면 다른 컴포넌트에 영향을 주는 디자인 코드가 돼버린다.

 

그렇다면 전역 스타일을 사용하긴 하는데 일부만 scoped를 적용시키려면 어떻게 해야 할까에 대해서 생각해보았고

간단하게 해결할 수 있었다.

<style>
// 다른 컴포넌트에 영향을 주는 디자인 코드
</style>
<style scoped>
// 현재 컴포넌트에만 적용됨
</style>

style tag를 분리해서 적용하면 쉽게 해결할 수 있다.

또 다른 방법으로는 ::v-deep, /deep/, >>>를 사용하면 된다.

 

다음과 같이 사용하면 하위 컴포넌트에 scoped 된 디자인을 적용할 수 있다.

<style scoped>
.p >>> .c {
}
.p /deep/ .c {
}
.p::v-deep .c {
}
</style>

/deep/ 과 >>>는 css  코드에서는 잘 작동하지만  scss 같은 전처리기에서는 잘 인식되지 않는 경우가 있다고 해서, ::v-deep을 사용하는 것을 권장한다고 한다.

 

위 두 가지 방식의 차이점은

style 태그를 두 번 사용할 경우 하위 컴포넌트뿐만 아니라 같은 수준의 컴포넌트에도 영향을 줄 수 있다.

하지만 ::v-deep은 하위 컴포넌트에만 스타일이 적용된다.