tag:crieit.net,2005:https://crieit.net/tags/Honoka/feed Crieitでタグ「Honoka」に投稿された最近の記事 2020-12-21T23:39:29+09:00 https://crieit.net/tags/Honoka/feed tag:crieit.net,2005:PublicArticle/16402 2020-12-21T23:39:29+09:00 2020-12-21T23:39:29+09:00 https://crieit.net/posts/honoka-bootstrap-use-in-node-modules-20201221 <p>今までは <a target="_blank" rel="nofollow noopener" href="https://honokak.osaka">Honoka</a> と <a target="_blank" rel="nofollow noopener" href="https://getbootstrap.com">Bootstrap</a> 本体を別のディレクトリに引っ張り出して合体させて使用していたのですが、 <code>node_modules</code> の中にそのまま残っている状態で使用したくなったのでメモしておきます。</p> <h2 id="経緯"><a href="#%E7%B5%8C%E7%B7%AF">経緯</a></h2> <p>今までは以下のように Honoka と Bootstrap を <code>node_modules</code> 外のディレクトリに引っ張り出して合体させていました。</p> <ol> <li><code>src/scss/assets/bootstrap/</code> ディレクトリを作成</li> <li><code>node_modules/bootstrap-honoka/scss/bootstrap.scss</code> を 1.のディレクトリにコピー</li> <li><code>src/scss/assets/bootstrap/honoka/</code> ディレクトリを作成</li> <li><code>node_modules/bootstrap-honoka/scss/honoka/_honoka.scss</code> を 3.のディレクトリにコピー</li> <li><code>src/scss/assets/bootstrap/honoka/honoka/</code> ディレクトリを作成</li> <li><code>node_modules/bootstrap-honoka/scss/honoka/</code> ディレクトリの <code>.scss</code> ファイルで4. <code>_honoka.scss</code> 以外を 5.のディレクトリにコピー</li> <li><code>src/scss/assets/bootstrap/honoka/bootstrap/scss</code> ディレクトリを作成</li> <li>7.のディレクトリの下に <code>node_modules/bootstrap/scss</code> 以下のファイル・ディレクトリをコピー</li> </ol> <p>これを npm scripts 等でひとまとめのタスクにして実行していました。</p> <p>そもそも、何故今までこの方法を取ったかというと、以下の2つの理由に拠ります。</p> <ol> <li><code>node_modules</code> 下に Honoka と Bootstrap があるそのままの状態では上手く動かなかったため</li> <li><code>src/scss/assets/bootstrap/honoka/_honoka.scss</code> を Git 管理対象にしたかったため <ul> <li>該当ファイルはコンポーネントの読み込みを司っており、不要なコンポーネントを切った状態を Git 管理したかった</li> </ul></li> </ol> <p>しかし、 <a target="_blank" rel="nofollow noopener" href="https://labor.ewigleere.net/2020/11/09/scss_transfer_libsass_dartsass/">LibSass から Dart Sass への乗り換え</a>たり、 <a target="_blank" rel="nofollow noopener" href="https://labor.ewigleere.net/2020/12/02/bootstrap_paint_in_variable/">Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする</a>で Scss 周りを改修している中で、もう少し良いやり方がないか、と思い始めた次第です。最初の1回だけとはいえ、ファイルコピーの待ち時間も必要になりますし……。</p> <h2 id="結果"><a href="#%E7%B5%90%E6%9E%9C">結果</a></h2> <p>結果、「<code>src/scss/assets/bootstrap/honoka/_honoka.scss</code> の代わりとなる各コンポーネント読み込みの Scss を自前で用意する」形で <code>node_modules</code> に Honoka と Bootstrap を残したまま使用できるようにしました。</p> <h3 id="package.json"><a href="#package.json">package.json</a></h3> <pre><code class="json"> "dependencies": { // 略 "bootstrap": "^4.5.3", "bootstrap-honoka": "^4.4.0", // 略 }, </code></pre> <p><code>package.json</code> はそのまま。</p> <h3>src/scss/global/<em>framework</em>.scss</h3> <pre><code class="scss">@charset "utf-8"; //@forward "../assets/bootstrap/bootstrap"; //bootstrap @forward "honoka/honoka_import"; //bootstrap </code></pre> <p>今まで <code>src/scss/assets/</code> 下のファイルを読み込ませていたのを、自前ファイルに切り替え。</p> <h3 id="src/scss/global/honoka/_honoka_import.scss"><a href="#src%2Fscss%2Fglobal%2Fhonoka%2F_honoka_import.scss">src/scss/global/honoka/_honoka_import.scss</a></h3> <pre><code class="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"; </code></pre> <p>今回用意した自前ファイル。<a target="_blank" rel="nofollow noopener" href="https://github.com/windyakin/Honoka/blob/v4.4.0/scss/honoka/_honoka.scss">Honoka/_honoka.scss at v4.4.0 · windyakin/Honoka</a>の内容をそのまま持ってきて、パスを調整したものになります。</p> <hr /> <p>これでファイルコピーやディレクトリを掘るタスクを整理できてすっきり。</p> <h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://www.saaria.info/archives/4773">日本語サイト向けBootstrapのhonokaをwebpackでビルドする</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://github.com/windyakin/Honoka/blob/v4.4.0/scss/honoka/_honoka.scss">Honoka/_honoka.scss at v4.4.0 · windyakin/Honoka</a></li> </ul> arm-band