[Vue.js] CSS 관리방법 - CSS Import , scoped, CSS Variable

dhkim 11월 07, 2022

 


 Vue 프로젝트에서 컴포넌트 별 CSS 관리와 전역 레벨에서의 CSS관리에 대해 다룹니다.


1. CSS Import

@import " [CSS 경로] ";

 아래와 같이 import할 (*.vue)파일의 style태그에 css경로와 함께 기재한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<style>
@import "./assets/css/global.css";

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.shadow {
  box-shadow: 5px 10px 10px rgba(0,0,0,0.03);
}
</style>



2. CSS Variable

 CSS 속성들을 변수형태로 유지하는 기법.

필자는 상위 컴포넌트에 global 레벨의 CSS를 한 번 import 받고,

이 때 불러온 내용을 하위 컴포넌트에서 사용한다. global.css에서는 프로젝트 전체에서 사용할 기본 색상 파렛트를 나열하였고, 이를 각 컴포넌트에서 사용한다.


':root' 블록안에 '변수명: 값' 쌍으로 선언,

호출 부에서 var( '변수명' )으로 호출한다.

[예제코드 : 선언]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* Global */
:root {
    /* Color (CSS Variables) */
    --color-white: #ffffff;
    --color-light-white: #eeeeee;
    --color-dark-white: #bdbdbd;
    --color-pink: #fe918d;
    --color-dark-pink: #ff6863;
    --color-dark-grey: #4d4d4d;
    --color-grey: #616161;
    --color-light-grey: #7c7979;
    --color-blue: #73aace;
    --color-yellow: #fff7d1;
    --color-orange: #feb546;
    --color-black: #000000;
    --color-favorit-puple: #cca9e0;
    --color-dark-puple: #71279c;

    /* Font size */
    --font-large: 48px;
    --font-medium: 24px;
    --font-regular: 18px;
    --font-small: 16px;
    --font-micro: 14px;

    /* Font weight */
    --weight-bold: 700;
    --weight-semi-bold: 600;
    --weight-regular: 400;

    /* Size */
    --size-border-radius: 4px;

    /* Animation */
    --animation-duration: 300ms;
}

button {
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

/* Typography */
h1 {
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color: var(--color-black);
    margin: 16px 0px;
}

h2 {
    font-size: var(--font-medium);
    font-weight: var(--weight-semi-bold);
    color: var(--color-black);
    margin: 8px 0;
}

h3 {
    font-size: var(--font-regular);
    font-weight: var(--weight-regular);
    color: var(--color-black);
    margin: 8px 0;
}

p {
    font-size: var(--font-regular);
    font-weight: var(--weight-regular);
    color: var(--color-black);
    margin: 4px 0;
}

body {
    margin: 0px;
}

a {
    text-decoration: none;
    color: var(--color-white);
}

ul {
    list-style: none;
    padding-left: 0;
}


/* Section common */
.section {
    padding: 50px;
    text-align: center;
    margin: auto;
}

.section__container {
    max-width: 1200px;
    margin: auto;
}

[예제코드 : 호출]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.navbar__menu__item:hover {
    background-color: #71279c;
    /* background-color: var(--color-dark-puple); */
    border-radius: var(--size-border-radius);
    cursor: pointer;
}

.navbar__menu__item.active {
    border: 1px solid var(--color-white);
    border-radius: var(--size-border-radius);
}



3. 현재 컴포넌트에만 CSS 적용범위 제한하기.

 style 태그에 'scoped' 옵션을 넣어주면, 해당 style태그가 있는 컴포넌트에 한 해서만 내부 CSS가 적용된다.

1
2
3
4
5
6
7
8
9
<style scoped>

.home {
    padding: 40px;
    padding-top: 120px;
    text-align: center;
}

</style>



0 댓글