# 安裝Bootstrap的各種小瑣事

## SCSS 客製化 (npm)

以下步驟請在確定自己的專案可以成功在

(1) localhost預覽
(2) npm i bootstrap

後再實作：

1. 找到本路徑node_modules>bootstrap>scss>_variables.scss將_variables.scss另存新檔至src>assets中
2. 在src>assets中新增自己的all.scss
3. all.scss中新增以下：

@import 'bootstrap/scss/functions';

@import './variables'; //這邊不用帶.scss沒關係

@import 'bootstrap/scss/bootstrap'

4. al接著在main.js引入剛剛新增的all.scss使其套用樣式：

import './assets/all.scss'

接著就可以測試bs元件看看有沒有套用到啦！

## 引入外部套件(npm)以axios, VueAxios為例

npm安裝完成後請記得仍須在main.js加上引入的程式碼：

import axios from 'axios'
import VueAxios from 'vue-axios'

app.use(VueAxios, axios)

像我是用vite開發，只要引入成功，vite終端機會顯示"new dependencies optimized: axios, vue-axios"開發更心安～

## popper.js

沒想過這個bundle這麼重要，會影響開發Q
被雷兩三次以上了，以後一定會多裝這個。

npm install bootstrap popper.js