CSSフレームワークであるBootstrap4を試してみました。CDNではなくビルドして試したので、導入手順をメモしておきます。
使用した環境
- Ubuntu 20.04
- Node.js v12.18.3
パッケージインストールと設定
以下のコマンドでインストールします。
$ npm install --save-dev webpack webpack-cli css-loader sass sass-loader autoprefixer mini-css-extract-plugin optimize-css-assets-webpack-plugin
$ npm install --save bootstrap jquery popper.js cross-env
package.json
のscripts部分にビルド用のコマンドを記載します。
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules"
},
webpackのコンフィグwebpack.config.js
をプロジェクトルートに作成します。
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const environment = process.env.NODE_ENV;
module.exports = {
mode: environment,
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
]
}
]
},
output: {
filename: 'js/[name].js',
path: __dirname + '/dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css'
}),
new OptimizeCssAssetsPlugin({}),
],
};
ソース
お試しなので必要最低限です。
src/index.js
import 'bootstrap';
import './index.scss';
src/index.scss
@import "~bootstrap/scss/bootstrap.scss";
ビルド
以下のコマンドでビルドします。
開発環境の場合
$ npm run dev
本番環境の場合
$ npm run prod
ビルドすると、dist
ディレクトリ下にjsとcssが生成されます。
dist/
css/
main.css
js/
main.js
表示確認
適当なhtmlを用意して確認します。

表示されました。
まとめ
Bootstrap4 with Webpack4を試してみました。Sassであればテーマ色変更などカスタマイズが簡単なので、それっぽいものを手間をかけずに作れて便利だと感じました。
今回のソースはこちらにありますのでご参考までに。