在這邊紀錄一下怎麼將 Bootstrap 4 新增進 vue-cli 3.x 所建立的專案中。

1. Install

使用 npm 安裝 Bootstrap 4 以及相依套件。

npm install bootstrap jquery popper.js

// or

yarn add bootstrap jquery popper.js

2. Import

main.js 中匯入 Bootstrap 的 js 與 css

import 'bootstrap'; // Import js file
import 'bootstrap/dist/css/bootstrap.min.css'; // Import css file

接下來就可以去檢查看看有沒有匯入成功囉!

Image


客製化 Bootstrap

如果想要客製化一些 Bootstrap 的變數或樣式,可以自己開一個 custom.scss 的檔案,在裡面寫好要改的變數或樣式後, 再開一個 main.scss 的檔案,並把匯入 Bootstrap 的 scss 與剛剛的 custom.scss,如下:

@import "custom";
@import "~bootstrap/scss/bootstrap";

之後再把 main.scss 匯入 main.js 就可以了

import './styles/main.scss';