おさらい
Part1 では ES2015 なコードを webpack で使う手順を紹介しました。 Part2 では Bootstrap を導入する手順を説明します。
Lesson3: CSS を bundle する
Javascript のコード中で stylesheet を require します。 require した CSS を head 内に挿入する方法もありますが、ここでは CSS を head に挿入せず別ファイルとする方法を記します。
% npm i --save-dev style-loader css-loader
create www/index.html:
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <h1>test<h1> <script src="bundle.js"></script> </body> </html>
edit: webpack.config.js
loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, + { test: /\.css$/, loader: "style-loader!css-loader" } + ],
背景を少し暗くしてみる。
add src/style.css:
body { background: #666; }
edit src/app.js
import "babel-polyfill"; +import "./style.css"; import moment from 'moment'; (async () => { sayNow();
動作確認
% $(npm bin)/webpack-dev-server
Lesson4: Bootstrap の CSS を導入する
% npm install --save bootstrap
以下の一行を追加してみる: src/app.js
import "babel-polyfill"; +import 'bootstrap/dist/css/bootstrap.css'; import "./style.css"; import moment from 'moment'; (async () => { sayNow();
ただし、このままでは動かないので以下の Loader を追加する
% npm install --save-dev url-loader
webpack.config.js に以下を追記
module: { loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, - { test: /\.css$/, loader: "style-loader!css-loader" } + { test: /\.css$/, loader: "style-loader!css-loader" }, + { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' }, + { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' }, + { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' }, + { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' }, + { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' } ], } };
以下のボタンを追加する: edit www/index.html
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">Button</button>
動作確認をする
% $(npm bin)/webpack-dev-server
まとめ
これで Bootstrap の CSS を使えるようになりました。 次回は Bootstrap の Javascript を使った Components を使う方法を紹介します。
参考 URL
http://wannabe-jellyfish.hatenablog.com/entry/2016/03/06/034101