Webpack中使用Bootstrap 4
因為Bootstrap官方文件寫得不是很清楚,然後又有點問題,就順手做了紀錄。不過這篇跟React幾乎沒有什麼關係...主要只是因為我在自己建立的React開發環境中使用了Bootstrap而已
詳細或懶人可以參考我的github
安裝Bootstrap、Bootstrap相依套件和css轉換套件
$ npm install bootstrap@4.0.0-alpha.6 popper.js jquery --save $ npm install css-loader style-loader --save-dev
設定webpack.config.js
全域中新增變數
var webpack = require('webpack');
在plugins段落中新增
plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Tether: 'tether', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", }) ]
在module段落中新增
{ test: /.css$/, use: [ 'style-loader', 'css-loader' ] }
使用Bootstrap
在元件中import
import 'jquery' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.css'
webpack設定檔(參考用)
var path = require('path'); var webpack = require('webpack'); var config = { entry: [path.resolve(__dirname, 'app/main.jsx')], output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Tether: 'tether', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", }) ], module: { loaders: [{ test: /.jsx?$/, loaders: ['babel-loader'] },{ test: /.css$/, use: [ 'style-loader', 'css-loader' ] }] } }; module.exports = config;