Honoka を node_modules 内で使用する

今までは Honoka と Bootstrap 本体を別のディレクトリに引っ張り出して合体させて使用していたのですが、 node_modules の中にそのまま残っている状態で使用したくなったのでメモしておきます。

経緯

今までは以下のように Honoka と Bootstrap を node_modules 外のディレクトリに引っ張り出して合体させていました。

1. src/scss/assets/bootstrap/ ディレクトリを作成
2. node_modules/bootstrap-honoka/scss/bootstrap.scss を 1.のディレクトリにコピー
3. src/scss/assets/bootstrap/honoka/ ディレクトリを作成
4. node_modules/bootstrap-honoka/scss/honoka/_honoka.scss を 3.のディレクトリにコピー
5. src/scss/assets/bootstrap/honoka/honoka/ ディレクトリを作成
6. node_modules/bootstrap-honoka/scss/honoka/ ディレクトリの .scss ファイルで4. _honoka.scss 以外を 5.のディレクトリにコピー
7. src/scss/assets/bootstrap/honoka/bootstrap/scss ディレクトリを作成
8. 7.のディレクトリの下に node_modules/bootstrap/scss 以下のファイル・ディレクトリをコピー

これを npm scripts 等でひとまとめのタスクにして実行していました。

そもそも、何故今までこの方法を取ったかというと、以下の2つの理由に拠ります。

1. node_modules 下に Honoka と Bootstrap があるそのままの状態では上手く動かなかったため
2. src/scss/assets/bootstrap/honoka/_honoka.scss を Git 管理対象にしたかったため
   • 該当ファイルはコンポーネントの読み込みを司っており、不要なコンポーネントを切った状態を Git 管理したかった

しかし、 LibSass から Dart Sass への乗り換えたり、 Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きするで Scss 周りを改修している中で、もう少し良いやり方がないか、と思い始めた次第です。最初の1回だけとはいえ、ファイルコピーの待ち時間も必要になりますし……。

結果

結果、「src/scss/assets/bootstrap/honoka/_honoka.scss の代わりとなる各コンポーネント読み込みの Scss を自前で用意する」形で node_modules に Honoka と Bootstrap を残したまま使用できるようにしました。

package.json

    "dependencies": {
        // 略
        "bootstrap": "^4.5.3",
        "bootstrap-honoka": "^4.4.0",
        // 略
    },

package.json はそのまま。

src/scss/global/framework.scss

@charset "utf-8";

//@forward "../assets/bootstrap/bootstrap"; //bootstrap
@forward "honoka/honoka_import"; //bootstrap

今まで src/scss/assets/ 下のファイルを読み込ませていたのを、自前ファイルに切り替え。

src/scss/global/honoka/_honoka_import.scss

@charset "utf-8";

// Core functions
@import "node_modules/bootstrap/scss/functions";

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

@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";

// Core CSS
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";

// Components
@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
@import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
@import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
@import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
@import "node_modules/bootstrap/scss/toasts";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/tooltip";
@import "node_modules/bootstrap/scss/popover";
@import "node_modules/bootstrap/scss/carousel";
@import "node_modules/bootstrap/scss/spinners";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

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

今回用意した自前ファイル。Honoka/_honoka.scss at v4.4.0 · windyakin/Honokaの内容をそのまま持ってきて、パスを調整したものになります。

---

これでファイルコピーやディレクトリを掘るタスクを整理できてすっきり。

参考

• 日本語サイト向けBootstrapのhonokaをwebpackでビルドする
• Honoka/_honoka.scss at v4.4.0 · windyakin/Honoka