# Vue3 + Vite + Bootstrap5(Part2)
###### tags: `Vue3`、`Vite`、`Bootstrap5`
> 接續著前一篇的 scss 引入
> 這邊繼續聊一下遇到的問題

## :memo: 開始吧!
### Step1 複製 Bootstrap5 至 assets
assets 資料夾通常是專案做樣式管理的資料夾目錄

如圖複製 Bootstrap 的 scss 至 assets



### Step2 新增 all.scss 並 import

這邊建立一個全站使用的 all.scss

將由 Bootstrap 複製過來的 scss ，更改為 bootstrap 方便管理

在 all.scss 內 import

@import "bootstrap/bootstrap";

### Step3 在 main.js 內 import all.scss

我們原先在 main.js 內 import 的 bootstrap 調整為 import all.scss

import { createApp } from "vue";
import App from "./App.vue";

//import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/all.scss";
import "bootstrap";

createApp(App).mount("#app");

### Step4 新增 sass loader

將前面的步驟調整完執行

npm run dev

應該就可以得到以下圖片

這代表著 vite 並不認得 scss 這格式的檔案

此時我們執行以下 loader 的安裝

npm i sass

### Step5 修正 Bootstrap 內格式

當再次執行 npm run dev

會得到如下的圖片提示

這說明著 Bootstrap 的官方樣式，再 Sass 2.0.0 將會不再支援

這時我們可以去提示內的 [slash-div](https://sass-lang.com/d/slash-div) 教學提示進行修正

但官方也有貼心的批次作業指令，如下

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

操作步驟
1. 至 src\assets 資料夾
1. 開啟 vs code，並執行上面兩個指令
1. 再 _variables 內看到 @use "sass:math"; 就代表成功

@use "sass:math";

- 以上，就是一個用 scss import 的一個說明
- [GitHub](https://github.com/chinggo/Vue3_Vite_Bootstrap5) 附上這次的程式碼連結供參考，謝謝各位閱讀