Vue.js 電商練習技術整理 -- 載入Bootsrap 4 套件，且自定義樣式

文章目的

藉由將 Bootstrap 4 套用到 Vue Cli 的專案裡，以方便後續開發 css 使用，並可將 Bootstrap 4 的預設樣式做修改，修改成專案所需樣式。

載入 Bootstrap 4

在我們的終端機或是命令提示字元， cd 到我們的專案路徑，輸入npm install bootstrap –save。
安裝完成後，我們應該可以在 node_modules 資料夾底下看到 bootstrap 的資料夾。
步驟進行到這邊，還不算完全安裝好，因為我們並沒有支援 sass 的 loader，因此要再進行相關安裝。
這邊輸入npm install node-sass sass-loader –save，這樣子我們就完成載入 Bootstrap 囉。

將 Bootstrap 4 套用到我們的專案上

來到 App.vue 的 style，在標籤上加入 lang="scss"，並在標籤內輸入 @import '~bootstrap/scss/bootstrap'，詳細程式碼如下：

1
2
3

<style lang="scss">
@import "~bootstrap/scss/bootstrap";
</style>

自定義 Bootstrap 樣式

若我們要自定義樣式，套用方式會跟上面有點差別。

來到 node_modules 底下的 bootstrap 資料夾，並在 scss 資料夾底下找到 _variables。
在 assets 下新增一個 helpers 資料夾，將 _variables 另存新檔到 helpers 裡。

在 assets 資料夾下新增一個 all.scss 的檔案，在裡面載入檔案，程式碼如下：

1
2
3

@import "~bootstrap/scss/functions"; /*bootstrap 套用變數的方法，有它我們才能正確套用自定義變數*/
@import "./helpers/_variables"; /*我們的自定義內容*/
@import "~bootstrap/scss/bootstrap"; /*bootstrap 主套件*/

這邊要注意一點在載入時3個的順序要如上方所示，此為 bootstrap 官方規定。– 規定內容
3. App.vue 的 style 載入方式也要做修改，程式碼如下：

1
2
3

<style lang="scss">
@import './assets/all' /*改成載入我們新建的all.scss*/
</style>

自定義示範
載入完成後，我們就能來自定義自己要的樣式。
打開我們另存的 _variables.scss，我們可以為裡面的變數做修改。
像是 Bootstrap 4 預設 primary 顏色為藍色，這裡透過改變變數將其顏色改變，程式碼如下：

$theme-colors: map-merge(
  (
    "primary":    $purple, /*預設為$primary*/
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

我們只要套用相關 bootstrap 元件或是 className 就會發現 primary 變成紫色。
這就是一個自定義內容的簡單範例。

參考資料

六角學院課程–Vue 出一個電商網站