---
# System prepended metadata

title: vite 新增bootstrap

---

:::warning 
# vite 新增bootstrap
:::
:::info
**1. google 搜尋 npm bootstrap**
:::
:::info
**2. 複製 npm install bootstrap@v5.2.3**
![](https://i.imgur.com/YEfPi82.png)
:::
:::info
**3. 終端機輸入貼上 npm: npm install bootstrap@v5.2.3**
:::
:::info
**4. Vscode裡vite裡面src底下的assets資料夾 新增all.scss** ![](https://i.imgur.com/cjw2pYJ.png)
:::
:::info
**5. bootstrap官方文件搜尋Sass 下方有匯入**![](https://i.imgur.com/7aVeV8k.png)
:::
:::info
**6. Vscode裡面的src->assets->all.scss新增**![](https://i.imgur.com/Ni5UMvK.png)
:::
:::info
**7. Vscode裡面main.js 新增import "./assets/all.scss";**![](https://i.imgur.com/IFegQou.png)
:::
:::info
**8. 終端機會噴錯如下圖**![](https://i.imgur.com/dtwQYSX.png)
:::
:::info
**9. google搜尋 vite sass (npm add -D sass輸入終端機)** [vite官網](https://cn.vitejs.dev/guide/features.html)![](https://i.imgur.com/8s36vgm.png)
:::
:::info
**10. 在重新運行需先停掉vite ( contral+c 在 npm run dev)**
:::

---

:::warning 
# vite 自定義 bootstrap
:::
:::info
**1. 如上 第五點 複製 all.scss**![](https://i.imgur.com/lNJWprg.png)
:::
:::info
**2. 貼上all.scss裡 如下圖第1.2行** <font color = "red">(functions這隻檔案比需在第一行!!!) </font> ![](https://i.imgur.com/oRRMV4k.png)
:::
:::info
**3. 到Vscode裡 node_modules底下找variables這隻檔案複製到src->assets新增上去**
(原因是node_modules不能改檔案！！) 必須到自己的檔案裡覆蓋bootstra
:::
:::info
**4. 到Vscode裡面 src->assets->all.scss檔案修改variables路徑**![](https://i.imgur.com/Tip146b.png)
:::
:::info
**5. 此時就看修改裡面的變數以及自定義了!!**
:::
---
:::success
若是有修改bootstrap變數的話 後面可以使用註解的方式方便好恢復原本的
![](https://i.imgur.com/usyVETi.png)
:::

