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";

bootstrap iconsを利用する

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

iconsのcssをimportしてから、

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

参考