Webpack4でBootstrapをバンドルする
初めまして。先日、人生でほぼ初めてスポーツ用品店に入ったマークアップエンジニアのともよーんです。
今までスポーツに全く縁のない暮らしをしてきたのでスポーツ用品店に抵抗があり、できれば入りたくなかったのですが、息子がサッカーを始めるに当たって靴だけは店で試着をしてから買った方がいいとのアドバイスを受け、怯えながら駅前のスポーツオーソリティに足を踏み入れました。かわいい息子のためなので仕方ありません。
スポーツオーソリティって店の名前からして恐ろしい。英語表記も SPORTS AUTHORITY と全て大文字で何だか威圧感があります。
「スポーツの…権威だと？」と心の中で呟く。
「フォートナイトにね、ザ・オーソリティって出てくるんだよ。」とはしゃぐ息子。
息子：「オーソリティってどういう意味？」
私：「権威、というか、権力を持っている側の人たちのことだよ。」
と、小学校１年生とするには不毛なやり取りをしながら買い物しましたが、店員さんは親切でスポーツに疎いことでマウントを取られることもなく、無事にトレーニングシューズを買うことができました。
さて、前置きが長くなりました。本題に入ります。
最近、「Laravelでプログラム組むのでBootstrapを使って欲しい」という要望が続いています。前回はコンパイル・ミニファイ済のものを使いましたが、次はスタイルのカスタマイズが柔軟にできるというWebpackでBootstrapのバンドルをするべく、開発環境を作ってみました。今回はその大まかな流れをご紹介したいと思います。
Bootstrap インストール
npmパッケージを使ってbootstrapをインストールします。
$ npm install bootstrap※今回は基本的なWebpackの使い方などは割愛します。
続いて、Bootstrapが依存するjQueryとPopper.jsもインストールしておきます。
$npm install --save jquery popper.jsJavascript インポート
エントリーポイントのjsファイルに次の記述を追加して、BootstrapのJavascriptをインポートします。
一緒にjQueryもインクルードします。Babelを使っている時は以下のような記述になります。
import 'bootstrap';
import $ from 'jquery';スタイルのインポート
scssファイルにBootstrapのscssファイルと、組み込みカスタム変数を記述する用のファイルをインポートします。
この変数をカスタマイズできるのがミソです。変数を上書きできると何かと便利ですよね！
@import "custom";
@import "~bootstrap/scss/bootstrap";カスタム用のscssファイルは相対パスを、Bootstrapのファイルは上記のように書いてあげるとnode_modulesの中のものを読み込んでくれます。図にするとこんな感じ。
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssBootstrapでは_reboot.scssというCSSリセット用のファイルが入っているので、普段使っているリセット用の記述は不要なので消しておきます。
webpack.config.js
Bootstrapのscssを使うにはsass-loaderとpostcss-loaderでのAutoprefixer設定が必要です。
以下のようにwebpack.config.jsに記述します。
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...sass-loaderとpostcss-loaderが入っていない場合はnpmでインストールします。postcss-loaderを使う関係で変数やネストの使用を可能にするprecssも必要になります。
$ npm install --save-dev sass-loader postcss-loader precssこれで、準備は完了です。
modalやbtn、グリッドシステムなどのBootstrapの機能がhtmlの編集だけで使えるようになりました。
次は各機能のことも書こうと思います。
ではでは！
参照サイト：
Bootstrap テーマ – Bootstrap 4.4 – 日本語リファレンス
https://getbootstrap.jp/docs/4.4/getting-started/download/#npm
https://getbootstrap.jp/docs/4.4/getting-started/webpack/
https://getbootstrap.jp/docs/4.4/getting-started/theming/#grays
最新版で学ぶwebpack 4入門 Bootstrapをバンドルする方法
https://ics.media/entry/17749/
bootstrap/_reboot.scss at v4-dev · twbs/bootstrap · GitHub
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
