Vue3でBootstrapとBootstrap Iconを利用する

npm install --save bootstrap bootstrap-icons

bootstrapをcustomする

main.js

import 'bootstrap'
import '@/scss/custom.scss'

bootstrapの変数を上書きしてからbootstrapのscssをimportすると反映される。

scss/custom.scss

$body-bg: #000;
@import "node_modules/bootstrap/scss/bootstrap";

main.js

import 'bootstrap-icons/font/bootstrap-icons.css'

iconsのcssをimportしてから、

App.vue

<i class="bi bi-file-bar-graph"></i>