想在使用 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'
})

參考資料