:::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) :::