$ npm i bootstrap@next
// 잘 작동하는지 확인 해 준다.

// scss 폴더 안에 main.scss
@import "../../node_modules/bootstrap/scss/bootstrap";

// App.vue
<template>
  <RouterView />
</template>

<style lang="scss">
@import '~/scss/main';
</style>

//Home.vue
<template>
  <h1>Home!</h1>
  <div class="btn btn-primary">
    Home
  </div>
</template>

Bootstrap customizing

**!default** 플래그는 SCSS 에서 제공하는 기능으로, 새롭게 지정되는 값이 있으면 기존 값을
무시하겠다는 의미이다.

<https://getbootstrap.com/docs/5.1/customize/sass/>

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 위의 코드를 우리 프로젝트에 맞게 수정. 또한 우린 primary 를 노란색으로 할 것이다.
// $primary 를 우리가 정의해 줌으로써 사용하게 된다.

// Default variable overrides
$primary: #FDC000;

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

@import "../../node_modules/bootstrap/scss/bootstrap";

// $theme-colors 같은 경우에도 !default 이다. 그렇지만 Required 위에 선언하게 되면
// error 가 난다. 당연하겠지만 선언하지도 않았던 변수들을 사용하기 때문이다.
// 권장되는건 우리가 직접 customizing 해서 Required 위에다가 선언해주는 것이다.

// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

@import "../../node_modules/bootstrap/scss/bootstrap";