How to import SCSS in Vue

Vue에서 Style 적용 방식은 여러가지가 있다.

1. 모든 클래스들을 한 파일안에 넣는 방법

// style.scss
.box1{
 ...
}
.box2{
 ...
}
.box3{
 ...
}

이 경우 빌드했을 때 1.25Kb가 나왔다.

2.각 컴포넌트에 해당하는 클래스끼리 나눠서 작성하는 방법

// box1.scss
.box1{
 ...
}

//box2.scss
.box2{
 ...
}

//box3.scss
.box3{
 ...
}

//home.vue
@import './box1.scss'
@import './box2.scss'
@import './box1.scss'

이 경우 빌드했을 때 1.09Kb가 나왔다.

3. 각 컴포넌트 별로 scoped를 적용해 style에 넣어주는 방법

//box1.vue
<style src="box1.scss" lang="scss" scoped></style>
//box2.vue
<style src="box2.scss" lang="scss" scoped></style>
//box3.vue
<style src="box3.scss" lang="scss" scoped></style>

이 경우 빌드했을 때 1.35Kb가 나왔다.

따라서 두번째 경우가 가장 효율적으로 빌드할 수 있는 방식이다.