HOME > vue

[NuxtJS] 특정 페이지의 컴포넌트에만 전역 스타일 적용하기, global style

마지막 수정일 : 2022-07-14 / 생성일 : 2022-06-24
426
View Count

NuxtJS를 사용하는 경우 해당 컴포넌트 또는 전역으로 style을 설정할 수 있습니다. 이 경우 만약 특정 페이지에서만 전역으로 스타일을 설정할 경우의 방법을 알아보려고 합니다.


# NuxtJS에서 특정 페이지만 전역 스타일 설정하기
제일 먼저 생각할 고민은 아래와 같습니다.


"특정 페이지에서만 전역 스타일 설정이 왜 필요할까?"


Nuxt에 사용된 모든 스타일은 컴파일 후 하나의 파일로 번들링 과정을 거치게 됩니다. 즉 글로벌로 설정된 스타일이 있는 경우 해당 페이지뿐만 아니라 결국 모든 페이지에 영향을 주게 된다는 점인데 이런 이유로 특정 페이지의 body나 header 등의 페이지에만 적용하기가 어렵습니다. 그래도 방법은 뭐가 있을까요?


! 해결 방법 알아보기
현실적으로 이를 우회하는 방법은 가장 많이 알려진 자바스크립트를 사용하는 방법이 있습니다. 자바스크립트의 방법은 간단합니다 ~ 페이지 컴포넌트가 Mounted 된 후 자바스크립트로 body 등에 원하는 스타일을 추가하면 됩니다.

예를들어 만약 /test 패이지에서만 페이지의 배경색을 gray색으로 변경하고자 합니다. 이 경우 아래와 같은 코드를 해당 페이지 컴포넌트 내에 추가할 수 있겠습니다.
mounted: function() {
  document.querySelector('body').style.backgroundColor  = 'gray'
}

위 코드를 실행하면 간단하게 해당 페이지에서만 body에 스타일을 변경할 수 있습니다. 어려운 방법은 아니죠 ~~ 다만 더 나은 방법이 없을까 고민하게됩니다. 왜냐하면 가급적 스타일은 script 내부가 아닌 style 안에 분리하여 선언했트면 하는 아쉬움입니다. 방법이 없을까요?

@ style 태그에 v-if를 사용하는 방법
이번 방법은 더 나은 방법으로 style 태그를 그대로 사용하는 방법입니다. 동일하게 해당 페이지의 body에만 gray 색으로 배경색을 변경하려고 합니다. 아래의 코드를 봐주세요.
<style v-if="true">
body {
  background-color: gray;
}
</style>

<style lang="scss" scoped>
.my-componet {
  color: red;
}
</style>

위의 코드를 보면 컴포넌트 내부에 스타일 태그를 각각 두 개 선언하였습니다. 여기서 위에 선언된 style에는 v-if가 존재하는데 이 때문에 nuxt에서 특정 페이지에서만 body에 스타일을 적용할 수 있게 되었습니다. v-if가 적용된 스타일만 보겠습니다.
<style v-if="true">
body {
  background-color: gray;
}
</style>

동작 방싯을 이해해보면 특정 페이지에만 해당 컴포넌트를 불러오며 이 때 style에 적용된 v-if 때문에 다른 페이지에서는 style이 사라지므로 적용되지 않도록 한 방법입니다.

이 방식의 장점은 무엇일까요? 위 방식을 사용하면 script 내부에 스타일을 선언하지 않으므로 동작에 필요한 로직과 스타일을 완전히 구분하여 코드 작성이 가능합니다.


여기까지 NuxtJS에서 특정 페이지에만 body 등에 스타일을 적용하는 방법을 간략하게 알아보았습니다.

Author ByEnSSo