31. Vue - 부트스트랩(Bootstrap)

1. Bootstrap 버전 5 설치 

• 터미널 입력: npm i bootstrap@next 

 

---

2. Bootstrap 설정 

[파일 경로]

 

 

[main.scss]

@import "../../node_modules/bootstrap/scss/bootstrap" // 부트스트랩

 

 

[App.vue]

<template>
  <router-view />
  <!-- router-view: 라우팅 요소가 출력되는 태그-->
</template> 

<script>
export default {
}
</script>

<style lang="scss">
@import "~/scss/main";
/* scss 파일 연동(bootstrap) */

</style>

 

---

3. Bootstrap Customization

https://getbootstrap.com/docs/5.0/customize/sass/

Sass

 

 

클릭하면 확대됩니다.

 

[main.scss]

/* Default variable overrides (재정의 파트) */

$primary: #FDC000; 
/* 재정의가 명시되는 부분을 variables 파일 위쪽에서 되어야함 
   primary 이름의 변수를 노란색으로 재정의 */

/* Required (부트스트랩 커스터마이즈 문서에서 가져옴) */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins"; 

$theme-colors: ( 
  /* 하나라도 재정의가 안된 것이 있다면 여기에 위치해야 하고,
  모든 key가 다 재정의 되었다면 위쪽에 올려도 문제 없음 
  그 이유는 $value에 있는 값들이 모두 
  "../../node_modules/bootstrap/scss/variables" 여기에서 오기 때문임 */
  
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

/* 부트스트랩 scss */
@import "../../node_modules/bootstrap/scss/bootstrap"