レスポンシブ対応サイトを手早く作れるHTMLフレームワークである”Bootstrap”は様々な所で採用されていますが、本家からフォークされ日本語サイト向けにカスタマイズされた”honoka”というフレームワークがあります。
配布元の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ファイルを分ける設定」を参考にさせて頂いています。
const path = require('path');
const webpack = require('webpack');
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”（自動ビルド）を実行します。
