在這邊紀錄一下怎麼將 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';

感謝閱讀！

喜歡這篇文章或是有幫助到你嗎？ 歡迎分享給你的朋友！

有任何問題、回饋或您認為我會感興趣的任何東西嗎？ 請在下面發表評論，或者是直接聯絡我。

Puck Wang

Puck Wang

Hi！ 我是 Puck Wang，這個部落格的作者，是一位全端網站開發者，常使用 .Net 和 React 進行開發，專注於架構研究，你可以在這個部落格看到我精選的筆記內容，希望對你會有所幫助。

更多關於我的訊息，可至關於關於頁面。