新增 Bootstrap 4 到用 vue-cli 3.x 建立的專案中

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

1. Install

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

npm install bootstrap jquery popper.js

// or

yarn add bootstrap jquery popper.js

在 main.js 中匯入 Bootstrap 的 js 與 css

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

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

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

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

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

import './styles/main.scss';

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

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

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

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