Vue 3 SFC(Single File Component) <style>

사실 Vue3만을 위한 내용은 아니지만 Vue3기준이기에 다른 버전에선 안먹힐 수 있음.

겁나 간단한 내용들이고 공식문서에도 나오겠지만.. 나름 보기 편하게 정리. 진짜 금붕어 기억력 어뜨카냐

 

기본 사용법

<!-- XXX.vue -->
<style>
.hello{
    display:block;
}
</style>

전역적으로 적용된다.

 

언어 지정

<style lang="scss"></style>

원하는 언어를 설치한 뒤 lang="원하는 언어" 를 사용해서 scss, sass 등을 style 내에서 사용할 수 있다.

이건 template이나 script도 마찬가지. template에서는 lang을 pug로 설정한다던가 script에서는 ts를 넣으면 typescript로 사용할 수 있다. 

 

범위 지정 scoped

<style scoped></style>

이 코드가 적힌 파일 내의 요소에만 적용되는 스타일을 적을 수 있다. 기본적으로 자식요소에게 넘어가지 않는다.

하지만 아래와 같이 상위요소의 선택자를 가져오는건 가능하다.

<!-- 부모.vue -->
<template>
    <div id="hello">
        <자식/>
    </div>
</template>

<script setup>
import 자식 from "./자식.vue";
</setup>

<!-- 자식.vue -->
<temaplate>
    <h1>hello</h1>
</template>

<style scoped>
#hello h1{
    color:pink;
}
</style>

그리고 <style>과 함께 사용이 가능하다.

<!-- XXX.vue -->

<style>
*{
    margin:0;
    padding:0;
}
</style>

<style scoped>
.hello{
    margin:20px auto;
}
</style>

scoped 를 사용하면 class나 id를 사용하지 않아도 에러가 뜨지 않는다.

하지만 공식문서에서 말하길, 그렇게 하면 속도가 몇배나 느려지기에 class나 id를 사용하길 권장하고 있다.

샘플코드로 속도테스트 했을 때 차이가 있는지 없는지 확실하게 알 수 없었음.. 아마 샘플코드가 짧아서 그런듯.

아무튼 안전빵으로 열심히 class나 id 설정해두는게 좋다.

 

<style scoped>에서 하위요소에게 스타일 주기

<style scoped>
.hello:deep(.hi){
    display:block;
}
</style>

:deep(자식요소 선택자) 를 사용하면 된다. 이게 곧 .hello .hi {} 로 변하기 때문에 하위 요소에서 .hi 에게 값을 주는 것보다 우선시 됨. 

 

<style scoped>에서 전역스타일 만들기

<style scoped>
:global(.hello){
    margin:0;
}
</styl>

<style>과 함께 쓰기엔 애매할 때 :global(선택자) 를 이용해서 특정 요소들에게 전역 스타일을 줄 수 있다.

 

<style scoped>에서 <slot/> 안에 들어갈 요소에게 스타일 주기

<!-- 부모.vue -->
<template>
    <자식>
        <div>hello</div>
        <p>good bye</p>
    </자식>
</template>

<script setup>
import 자식 from "./자식.vue"
</script>

<!-- 자식.vue -->
<template>
    <slot/>
</template>
<style scoped>
:slotted(div){
    background:pink;
}
:slotted(p){
    color:blue;
}
</style>

외부 스타일 파일 불러오기

<!-- 전역 적용 -->
<style src="파일경로"/>

<!-- 범위 지정이 필요한 경우 -->
<style scoped src="파일경로"/>

따로 .css, .scss 등의 파일을 분리했거나 tailwind 같은 css파일로 구성된 라이브러리 등을 사용하는 경우 이런 방식으로 불러올 수 있다.

 

<style module> 모듈

https://vuejs.org/api/sfc-css-features.html#css-modules

SFC CSS Features | Vue.js

모듈은 내가 안써봐서... 공식문서 링크 참조. 나중에 CSS 모듈 제대로 찾아보고 쓰고나서 수정할거쉬다.

 

동적인 값을 사용하는 CSS (v-bind)

개인적으로 이거 진짜 오늘 첨보는 기능인데 너무 쩔음.

<style> 내에서 <script> 내에 선언한 값을 v-bind를 이용하여 사용할 수 있다. 

<template>
    <div class="hello">Yeah</div>
    <button @click="changeBackground">change background</button>
</template>
<script setup>
import {ref, computed} from "vue";
const color = "pink";
const background = ref("hotpink");
const changeBackground = computed(()=>{
    background.value = 'blue';
});

</script>
<style>
.hello{
    color:v-bind('color');
    background:v-bind('background');
}

</style>

위와 같은 식으로 script 내에서 선언한 변수 혹은 동적인 ref/reactive 변수를 style 태그 내로 가져와 v-bind 내에 적어서 해당 값을 쓸 수 있다. 저 코드는 Yeah 라는 단어의 색상은 pink가 되고 배경색은 hotpink 가 된다.

그리고 버튼을 누르면 changeBackground 함수가 실행되고 computed를 통해 hotpink 는 blue로 바뀐다.

그리고 그게 적용이 됨

 

난 여태 이거 몰라서 여태 아래와 같이 썼는데..

<template>
    <div :style="{background:backgroundColor.value}">Yeah</div>
    <button @click="changeBgColor">change background color</button>
</template>
<script setup>
import {ref, computed} from "vue";

const backgroundColor = ref('hotpink');
const changeBgColor = computed(()=>{backgroundColor.value = 'blue'});
</script>

....진짜 이거 보니까 더 드는 생각인데, 뷰3랑 script setup은 뷰 만든 사람이 정말 리액트를 발라버릴려고 만든게 아닐까?

리액트 그자슥은 분명 한 파일 내에 있는데 styled component 이거 안에 변수 넣는거 진심 킹받았단말임 하나하나 태그 안에 넣어줘야하 ㅂㄷㅂㄷ

 

암튼..이게 끝임.

정말 오랜만에 올리는 글인데..아직 임시저장해둔 글 세개정도 있음.

예전에 임시저장했던건 다시보니 약간 헛소리 적어둔거같아서 걍 싹 지우고 새로운 마음으로 새롭게 시작함.... 

그럼 20000.