Bootstrap4 を試してみる

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をプロジェクトルートに作成します。

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({}),
  ],
};

ソース

お試しなので必要最低限です。

import 'bootstrap';
import './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であればテーマ色変更などカスタマイズが簡単なので、それっぽいものを手間をかけずに作れて便利だと感じました。

今回のソースはこちらにありますのでご参考までに。