vue.js 부트스트랩 적용

공식 사이트: https://getbootstrap.com/docs/5.1/customize/sass/

Sass

명령어: npm i bootstrap@next

일반의존성으로 설치를 진행

 

main.scss 코드 수정 (부트스트랩 스타일 가져오기)

// 사용자 지정 색(재정의)
// 상단에 정의해야 기본적으로 색상이 정의되어있는 bootstrap/scss/variables 파일에 적용된다.
$primary: #FDC000;

// 부트스트랩 기능을 사용하기 위해 기본적으로 가져와야하는 코드
// Required
@import "../../node_modules/bootstrap/scss/functions";

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


// 부트스트랩의 scss를 가져와서 사용한다.
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

 

App.vue(부트스트랩 scss 사용 )

<template>
  <RouterView />
</template>

<style lang="scss">
// main.scss 플러그인을 가져온다.
@import "~/scss/main.scss";

</style>

 

Home.vue (다른 화면에서 적용되는지 확인)

<template>
  <h1>Home!</h1>
  <div
    class="btn btn-primary">
    부트스트랩 적용 확인
  </div>
</template>

 

브라우저 확인