想在使用 webpack 的專案中加入 Bootstrap 4 要懂些眉角，前提是已經了解 npm, webpack 是什麼不然就不會搜到這篇。

2017/09/04附註

Bootstrap 4 beta 版已經上線了，document 比起 alpha 版真的完善許多，還有一頁教你怎麼導入webpack，似乎是用 popper.js 取代了 tether.js，之後這篇應該也沒啥參考價值了，直接用 beta 吧！

在專案資料夾內使用 npm 安裝最新版 BS，jquery 是其依賴也要確認

1
2
$ npm install bootstrap@4.0.0-alpha.6 --save
$ npm install jquery --save

在 entry 的 js 檔案開頭加入此行引入BS:

index.js
1
import 'bootstrap';

引入樣式

  • 作法一: 在入口 JS 檔案引入
index.js
1
import 'bootstrap/dist/css/bootstrap.css';
  • 作法二: 在自己的 sass 檔裡引入
style.sass
1
@import "~bootstrap/scss/bootstrap.scss";

這裡用前綴波浪符 ~ 指向node_modules，因為 CSS/Sass 並不像 JS 能解析載入依賴檔案。

Writing @import "file" is the same as @import "./file"

webpack編譯時的變數對應

接著在 webpack.config.js 裡的 plugins 加入 ProvidePlugin 指定遇到相關變數時要引入的 package

webpack.config.js
1
2
3
4
5
6
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Tether: 'tether'
})

參考資料