---
# System prepended metadata

title: Vue3 + Vite + Bootstrap5(Part2)
tags: [Vue3, Vite, Bootstrap5]

---

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

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

如圖複製 Bootstrap 的 scss 至 assets

![複製Bootstrap的 scss](https://i.imgur.com/r4tWzbp.png)

![SCSS內容](https://i.imgur.com/Gcx7DD6.png)


### Step2 新增 all.scss 並 import

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

將由 Bootstrap 複製過來的 scss ，更改為 bootstrap 方便管理
![](https://i.imgur.com/Psj6Hhv.png)

在 all.scss 內 import 
```sass=
@import "bootstrap/bootstrap";
```


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

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

``` javascript=
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
```

應該就可以得到以下圖片
![](https://i.imgur.com/WZRZPFL.png)

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

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

```
npm i sass
```

### Step5 修正 Bootstrap 內格式

當再次執行 npm run dev

會得到如下的圖片提示
![](https://i.imgur.com/jm5Zf4u.png)

這說明著 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"; 就代表成功


```css=
@use "sass:math";
```

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