スポンサーリンク

日本語サイト向けBootstrapのhonokaをwebpackでビルドする

Web系

レスポンシブ対応サイトを手早く作れるHTMLフレームワークである”Bootstrap”は様々な所で採用されていますが、本家からフォークされ日本語サイト向けにカスタマイズされた”honoka”というフレームワークがあります。

Honoka - 日本語も美しく表示できるBootstrapテーマ
Honokaは日本語表示に最適化されたオリジナルBootstrapテーマです。

配布元のwikiにはgulpを使ったビルドが記載されていましたが、webpackについては記載が無く、小さなことでしたが躓きがあったので、メモとして残しておくことにします。

各種モジュールの導入

npmを使って、honokaやwebpackを始め必要なモジュールをインストールします。下記に作成した”package.json”を記載します。

{
  "name": "HOGE",
  "version": "1.0.0",
  "description": "FUGA",
  "private": true,
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development",
    "watch:dev": "webpack --mode=development --watch"
  },
  "author": "FOO",
  "license": "UNLICENSED",
  "dependencies": {
    "bootstrap-honoka": "^4.3.1"
  },
  "devDependencies": {
    "css-loader": "^3.4.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "sass-loader": "^8.0.0",
    "terser-webpack-plugin": "^2.3.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

“bootstrap-honoka”をインストールすると、”bootstrap”, “jquery”, “poper.js”も一緒に入ります。

webpack.config.jsの作成

下記サイトの「JavaScriptとCSSファイルを分ける設定」を参考にさせて頂いています。

【2019年版】webpack 4 個人的設定まとめ – expexp.jp
webpackで開発を行い、導入当初から仕様が変わったり、個人的な設定方法が固まってきたので一旦記事としてまとめます。Babel、CSSやSASS、HTML(Pug)の設定までを紹介。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  optimization: {
    minimizer: [
      new TerserPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          'sass-loader',
        ],
      }
    ]
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: './css/style.css'
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    }),
  ]
});

JavaScriptは”src”ディレクトリ直下に”bundle.js”として出力し、CSSは同じく”src”ディレクトリ直下に”style.css”として出力します。

これを”package.json”と同じ場所に配置します。

エントリーポイントファイル&それに読み込むファイルの作成

index.js

/* ------- CSS ------- */
import "./bootstrap.scss"; // 同じ階層にある"bootstrap.scss"を読み込む ※後述

/* ------- JS ------- */
import "bootstrap"; // 本家BootstrapのJSを全て読み込む
import $ from 'jquery';

//import "foo.js" // 外部のJSファイルを読み込んでみたり…

//自由記述のJSを以下に書く
$(function () {
  $('.bs-component [data-toggle="popover"]').popover(); // これを外部JSファイルに書くと動かなかった(ファイルの読み込み順の問題?)
  $('.bs-component [data-toggle="tooltip"]').tooltip();
})

これを”src”ディレクトリ内に配置します。

bootstrap.scss

これは、BootstrapのCSSの読み込み・変数の上書き(カスタマイズ)・自由なCSS(SASS)を記述するファイルです。

/* ------- Bootstrapのカスタム ------- */
// @import "custom"; とか書いて、別途作った"_custom.scss"を読み込ませたりでも問題無し
// 必ずBootstrap読み込み前に書くこと

$body-bg: #000;

/* ------- Bootstrapを読み込む ------- */

//Bootstrap-Honoka
@import "~bootstrap-honoka/scss/bootstrap.scss";

//こちらは本家Bootstrapの場合
//@import "~bootstrap/scss/bootstrap.scss";

/* ------- ここ以下に自由なCSS(SASS) ------- */
// 勿論インポートでも問題無し
p {
  strong {
    color: #f00;
  }
}

これを”index.js”と同じく”src”ディレクトリ内に配置します。

_honoka.scssの編集

本家の”Bootstrap”をimportしている全てのパスの先頭に”~”を追加する修正を施します。

@import "~bootstrap/scss/functions";
:
:
@import "~bootstrap/scss/print";

また、”honoka/~”で始まるインポートパスの先頭に”~bootstrap-honoka/scss/”を追加します。


// Honoka variables
@import "~bootstrap-honoka/scss/honoka/variables";

// Honoka original setting
@import "~bootstrap-honoka/scss/honoka/override";

ビルド

本番環境用なら”npm run build”、デバッグ環境用なら”npm build:dev”か”npm watch:dev”(自動ビルド)を実行します。