VueCLI vue3 BootstrapVue3설치 및 sass 적용하기

1. 스타일을 작성하는 여러가지 방법이 있지만 이번경우에는 제가 익숙하게 사용하고 있는 scss를 적용해서 프로젝트를 진행하고 싶어 sass를 먼저 설치하겠습니다. package를 설치하여 간단하게 적용이 가능합니다.

npm install -D sass sass-loader

2. bootstrapvue3를 설치해보겠습니다.

npm i bootstrap bootstrap-vue-3 @popperjs/core
npm i unplugin-vue-components -D

3. 설치가 되었다면, bootstrap와 bootstrap-vue-3 css와 use를 이용해서 vue에 적용해주면 사용이가능합니다.

main.js
import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'

// Optional, since every component imports their Bootstrap functionality
// the following line is not necessary
// import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

일반적인 사용자라면 여기서 끝내고 사용하면 됩니다.

4. 하지만 저는 여기서 bootstrap-vue-3 커스텀할 수 있게 폴더를 구조화 하고 scss를 적용하겠습니다.

main.js
import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'

// Optional, since every component imports their Bootstrap functionality
// the following line is not necessary
// import 'bootstrap'

import '@/styles/index.scss'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

main.scss
@import './default/variables.scss';

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';

5. 그리고나서 primary의 색상만 바꾸어보았고 제대로 적용 된것을 확인하였습니다.

variables.scss

$primary: #123456;

  <div class="home">
    <img src="../assets/logo.png" />
    <b-button variant="primary">test</b-button>
  </div>