Vue cli 專案 npm 載入 Bootstrap CSS、JS (筆記)
Published in
6 min readAug 28, 2020
目錄 :一、Bootstrap 的 CDN二、使用 CDN 載入三、使用 npm 指令載入四、客製化 Bootstrap 變數檔案載入
一、Bootstrap 的 CDN
分為 CSS 以及 JS
CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
JS:
- jQuery
- popper
- bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
二、使用 CDN 載入
若要使用 CDN 的方式,載入的位置在專案中 public/index.html ,貼上 CDN 就可以開始使用。
三、使用 npm 指令載入
CSS :
- 終端機輸入指令
npm install bootstrap --save
- 在 App.vue 的 <style> 中匯入
// Appp.vue <style lang="scss">
@import '~bootstrap/scss/bootstrap';
</style>
如果跳錯可以試試以下步驟,把 sass loader 加進來 :
- 終端機 ctrl+c 停止 vue cli
- 輸入
npm install node-sass sass-loader --save
npm run dev
重啟 vue cli
JS :
jQuery
全域載入 :
- 終端機下指令
npm i -S jquery
- 在 main.js 中匯入
// main.jsimport $ from 'jquery';window.$ = $;
3. 此時若在分頁中使用 jQuery 依然會跳錯,需要再補上一段註解
/* global $ */
,表示全域已經註冊 jQuery 了,區域不用再註冊一次。
// Products.vue<script>
/* global $ */
exprot default {}
</script>
popper
終端機下指令 npm install --save popper.js
Bootstrap JS
在 main.js 中加上以下這段匯入即可
// main.jsimport 'bootstrap';
四、客製化 Bootstrap 變數檔案載入
- 依照上一個「三、使用 npm 指令載入」步驟載入 Bootstrap 後,我們可以在node_modules/ bootstrap/scss/_variables.scss 找到此變數檔案,將它複製一份到 src/assets/helpers 資料夾內,一樣命名為_variables.scss。(helpers 為自己命名、新增的資料夾)
- 在 src/assets 中新增一個檔案叫 main.scss
- 在 main.scss import 載入主要的三支 scss 檔案 (參考 Theming 文件)
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
- 因為 variables 要使用我們自己客製化的變數檔案,因此需要修改路徑
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables'; // 自己的變數檔案
@import "../node_modules/bootstrap/scss/mixins";
4. 如果沒有特定要導入的檔案,接下來就可以將剩下的 bootstrap 用 @import 'bootstrap';
一次全部導入
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";@import '~bootstrap';
5. 在 App.vue 的 <style> 中匯入
- 記得把原本的
@import "~bootstrap/scss/bootstrap"
刪除,改為匯入 assets 中的 main.scss 檔案。
// App.vue<style lang="scss">
@import './assets/main';
</stule>
6. 可以開始修改 helpers 內的變數檔案囉~🤓