「Bootstrap4」の記事 - Crieit

Honoka を node_modules 内で使用する

2020-12-21T23:39:29+09:00

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

経緯

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

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

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

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

node_modules 下に Honoka と Bootstrap があるそのままの状態では上手く動かなかったため
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の内容をそのまま持ってきて、パスを調整したものになります。

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

参考

モーダルの中で Slick を動かす場合の諸注意(setPotion指定、 Uncaught TypeError: Cannot read property 'add' of null エラー回避のために slick-initialized クラスの確認、 unslick 指定)

2020-12-15T00:06:21+09:00

モーダルのような、初期状態で display: none; がかかっているような要素の中で Slick を動かす場合にハマった事項のメモです。

slick - the last carousel you'll ever need

やりたかったこと

lazyLoad
モーダルの中で Slick を動かす
複数のモーダルがある(それぞれに Slick あり)

シチュエーションとしてはこんなところ。

サンプル

以下に一つずつ解説してきますが、動作確認のためのサンプルを置いておきます。

Slick Test

リポジトリも。

Slick Test

1. lazyLoad

まずは lazyLoad ですが、これについては slick で用意されている lazyLoad プロパティが使えます。

$('slick').slick({
    lazyLoad: 'ondemand'
});

プロパティはスライドする度に画像を読み込む ondemand とページ読み込み後に読み込む progressive の2つ。

また、 lazyLoad で画像が読み込まれたときに発火するイベント lazyLoaded とエラー時に発火する lazyLoadError があるので、ケースによってはこれらも利用できそう。

$('slick').on('lazyLoaded', function (event, slick, image, imageSource) {
    // lazy load succeed
    console.log(`${event.type}: ${imageSource} / ${image[0].alt} の読み込みが完了しました。`);
    // 「lazyLoaded: http://placehold.jp/667x375.jpg / Slick 1-4 の読み込みが完了しました。」のようなメッセージを出力
});
$('slick').on('lazyLoadError', function (event, slick, image, imageSource) {
    // lazy load failed
    console.log(`${event.type}: ${imageSource} の読み込みが失敗しました。`);
});
$('slick').slick({
    lazyLoad: 'ondemand'
});

ちなみに、 lazyLoad は JS 側だけではなく、 HTML 側にも既述が必要です。

img タグの src 属性は画像が読み込まれるまでのダミー画像の指定、本番のスライドショーで表示させたい画像は独自の data-lazy 属性で指定、となります。

ここまでがサンプルの「Slick 1」のケース。

2. モーダルの中で Slick を動かす

2.1. 普通に Slick

さてここからが本題。

例として Bootstrap 4 のモーダルコンポーネントを利用しますが、モーダルのような初期状態で display: none; となっている要素の中に Slick をセットすると動かないようです。

原因としては、親要素が display: none; なので、 Slick の要素が width: 0px; で潰れてしまうようです(ついでに height: 1px; でもあった)。

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定なし)」のケース

2.2. setPotion

ここで Slick 公式やいくつかの記事を見ると「 setPotion を指定すると良い」という記述が散見されます。

これは setPotion を指定したタイミングで Slick 要素のサイズを再計算してくれるようです。

今回は「モーダルが開いた時」なので、ボタンの click イベントにバインドすると良さそうです。これならば複数モーダル + Slick でもクリックされたモーダルのみ Slick が動くようになるので処理も軽減できます。

注意点としては、 click イベント直後だとまだモーダルがフェードのエフェクトで表示されている途中なのでせっかく再計算しても潰れてしまう可能性があること。

そのため、 setTimeout で処理する時間を指定しましょう。

$('#setPotionModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $setPotion = $('#setPotion');
        // Slick
        $setPotion.slick({
            lazyLoad: 'ondemand'
        });
        $setPotion.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 2」の「モーダルを開く (setPotion 指定あり)」のケース

これでモーダルの中でも開くようになりました。よしよし……ではなかった。

3. Uncaught TypeError: Cannot read property 'add' of null エラーの回避 → .not('.slick-initialized')

先程のモーダル、1回開くだけならば良いのですが、2回目以降モーダルを開こうとすると

Uncaught TypeError: Cannot read property 'add' of null

というエラーが発せられます。既に Slick が動いているところに、 click イベントでもう一度 Slick をバインドしようとしたので怒られてしまったわけです。

回避策としては、 .not('.slick-initialized') を追加すること。

Slick は初期化を完了すると該当要素に slick-initialized を付与するため、 .not('.slick-initialized') で「まだ Slick の初期化が済んでいない要素」と指定することでエラーを回避できる、ということですね。

$('#unInitializedModalButton').on('click', function () {
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        const $unInitialized = $('#unInitialized');
        // Slick
        $unInitialized.not('.slick-initialized').slick({ // .not('.slick-initialized') を追加
            lazyLoad: 'ondemand'
        });
        $unInitialized.slick('setPosition');
    }, 300);
});

※サンプルの「Slick 3」のケース

console.log() 等で拾うと2回目以降 $unInitialized.not('.slick-initialized') は undefined になっていますが、エラーは回避できています。これで良し……ではなかった。

4. unslick

稀ですが、高速でモーダルを開いたり閉じたりして(あるいは何らかの理由で Slick の初期化が遅れて)しまうと、それ以降モーダルを開いても正常に Slick が表示されない現象が発生します。

画像が多かったり重かったりすると出やすくなるかもしれません。

ページ再読み込みすれば大丈夫と言えば大丈夫ですが……今回のシチュエーションではこの頻度がわりと大きく、無視できない状態でした。そのため、さらに対策を講じる必要がありました。

そこで、以下のような処理を行うことにしました。

モーダルを開くボタンクリック時
1. click イベント発火
2. setTimeout で 0.3s 後に Slick 実行 (const slickInit = setTimeout())
  - .not('.slick-initialized') 付き
モーダルを閉じる時
1. hidden.bs.modal イベント発火(Bootstrap 独自イベント)
2. jqueryObject.slick('unslick'); で unslick 発動、 Slick を解除
3. clearTimeout(slickInit); によって見初期化であろうとも上述「モーダルを開くボタンクリック時 2.」の動作を解除
4. modalButtonjqueryObject.off('hidden.bs.modal'); でhidden.bs.modal イベントもバインド解除

// setPosition ありで モーダル内 Slick を実行させる
const $unSlickModalButton = $('#unSlickModalButton');
const unSlickModalID = $unSlickModalButton.attr('data-target');
const $unSlickModal = $(unSlickModalID);
const slickInitializedClass = 'slick-initialized';
$unSlickModalButton.on('click', function () {
    const $unSlick = $('#unSlick');
    // 0.3s 後に setPosition 付きで Slick 実行
    const slickInit = setTimeout(() => {
        // Slick
        $unSlick.not('.slick-initialized').slick({
            lazyLoad: 'ondemand'
        });
        $unSlick.slick('setPosition');
    }, 300);
    $unSlickModal.on('hidden.bs.modal', function () {
        // Bootstrap のモーダルを閉じるイベントが発火したら
        if ($unSlick.hasClass(slickInitializedClass)) {
            // Slick 対象要素が slick-initialized クラスを持っていたら
            // unslick で Slick をアンバインド
            $unSlick.slick('unslick');
        }
        // setTimeout 発動前にモーダルを閉じると setTimeout が生き残っているので、すぐまたモーダルを開いたりすると Slick のバインドが2回走ったりしておかしくなるので clearTimeout する
        clearTimeout(slickInit);
        // モーダルを閉じる度に hidden.bs.modal イベントがバインドされて重複処理してしまうので閉じられたらアンバインドする
        $unSlickModal.off('hidden.bs.modal');
    });
});

※サンプルの「Slick 4」のケース

ここまでやって、ようやく納得のいく挙動になりました。思ったよりも紆余曲折ありました……。

参考

Slick

lazyLoad

「slick.js」の使い方応用編 | takblog

setPotion

Uncaught TypeError: Cannot read property 'add' of null

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

2020-12-02T23:50:23+09:00

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数・マップを上書きしたくなったので実験してみました。

今まで (node-sass / LibSass)

前提

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

今回の検証で使用するプロジェクトのディレクトリ構造は、このような状態とします。

src/html/index.html


    プライマリーボタン
    メインボタン

例として、こんな HTML があったとして。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

マップの定義を上書きするコードを書きます。

src/scss/foundation/_index.scss

@import "variables"; //変数(Bootstrap の変数上書きのコードあり)
@import "mixin";
@import "../assets/bootstrap/bootstrap"; //bootstrap

同じ foundation の中に読み込み用の Scss を用意します。

注意する点としては、「 Bootstrap の Scss を読み込むより前に、 Bootstrap の変数(マップ)を上書きするための自前の定義が書かれた Scss を読み込む」ということ。

src/scss/index.scss

@import "./foundation/index"; //読み込み

最後に、実際に index.css にコンパイルされる src/scss/index.scss で src/scss/foundation/_index.scss を読み込みます。

今までは、これで変数の上書きができました。

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

さて、ここで単純に今まで @import で記述していたのを @use, @forward に書き換えてみます。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

上書きしたい変数(マップ)の定義はそのまま。

src/scss/foundation/_index.scss

@forward "scss_variables"; //変数(Bootstrap の変数上書きのコードあり)
@forward "mixin";
@forward "../assets/bootstrap/bootstrap"; //bootstrap

今度は @import ではなく、 @forward に書き換えます。

src/scss/layout/_l-header.scss

@use "../foundation" as f;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に src/scss/foundation/_index.scss を読み込んで使用する Scss で @use による読み込みを行います。

src/scss/index.scss

@use "layout/l-header"; //_l-header.scss の中で @use を使って src/scss/foundation/_index.scss を読み込み、使用
@use "layout/l-main";
@use "layout/l-footer";

こんな形に書き換えます。

流れとしては、「src/scss/index.scss -(@use)-> src/scss/layout/_l-header.scss -(@forward)-> src/scss/foundation/_index.scss」という関係。

この状態で Dart Sass によるコンパイルを実行すると、$theme-colors の変数名が重複しているのでエラーになってしまいます。

Error: src/scss/foundation/_index.scss
Error: Two forwarded modules both define a variable named $theme-colors.
    ╷
3   │ @forward "variables";
    │ ━━━━━━━━━━━━━━━━━━━━ original @forward
... │
5   │ @forward "../assets/bootstrap/bootstrap"; //bootstrap
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
    ╵
  src/scss/foundation/_index.scss 5:1  @use
  src/scss/layout/_l-header.scss 3:1   @use
  src/scss/index.scss 8:1              root stylesheet

回避するためにはいくつかの方法が考えられますが、 Bootstrap 4 の @import を書き換えていくのは大変な上に既存ライブラリに手を入れるのはできれば避けたいので今回は不採用。

他の方法としては with を使う方法が考えられます。

ただし、これもいくつか工夫が必要です。

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)

安直に with を使おうかと考えましたが、構文的に with は @use でしか使えません。

そのため、以下のような書き換えは不可です。

src/scss/foundation/_index.scss

@forward "../assets/bootstrap/bootstrap" with (
    /* with の中では use で読み込んだファイルのスコープは使えない */
    $theme-colors: (
        /* 上書き */
        primary: #333,
        /* デフォルトにないカラーの追加 */
        main: red,
    ),
); //bootstrap

Dart Sass での検証3 (失敗 / ファイルスコープ)

@use とセットで使うということが分かったので、今度は @use で読み込んでいる場所で with を付けたそうと思いました。

src/scss/layout/_l-header.scss

@use "../foundation" as f with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

ただし、このような既述をすると以下のエラーが発生します。

Error: src/scss/layout/_l-header.scss
Error: There is no module with the namespace "f".
  ╷
7 │         primary: f.$own-color,
  │                  ^^^^^^^^^^^^^
  ╵
  src/scss/layout/_l-header.scss 7:18  @use
  src/scss/index.scss 8:1              root stylesheet

with の中では、その直前で既述した名前空間はまだ使えません。

「独自に定義したメインカラーでプライマリーカラーを上書きしたい」というケースが多いと思われるので、 with で上書きするときにメインカラーが変数で指定できないのは困ります。

そこで、独自定義の変数読み込みと Bootstrap 4 の読み込み部分を分けることにしました。

最終形

ディレクトリ構造

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ global/
       │    └ _index.scss      # 追加
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

src/scss/foundation/_scss_variable.scss

先程まであった上書き用のコードは削除。

src/scss/foundation/_index.scss

@forward "variables";
@forward "mixin";

Bootstrap 4 を読み込む @forward を削除。

src/scss/global/_index.scss

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

Bootstrap 4 を読み込む部分を切り出したのを、 src/scss/global/_index.scss とします。

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に使う部分。変数は foundation, Bootstrap 4 は global で読み込み、 foundation を先に読み込むことで、 with の中で使用できるようにしました。

src/scss/index.scss

@use "layout/l-header";
@use "layout/l-main";
@use "layout/l-footer";

index.css になる部分は読み込みだけ。

この形にすることでようやく当初意図していた形にすることができました。

備考1

今回の方法では Bootstrap 4 の中身は一切触れない方向で実装しました。そのため、 Bootstrap 4 の中は以前として @import で読み込まれており、変数はグローバルスコープに定義されるようです。

そのため、今回は src/scss/layout/_l-header.scss でしか with を使用していませんが……

デフォルト状態ではこのような状態になります(プライマリーカラーがデフォルト、右側はデフォルト状態では存在しない btn-main クラスが付与されているため背景色なし)。

src/scss/layout/_l-header.scss に with を適用しただけで、メイン部分のボタンも影響を受けます。今回の場合は「全体で色を変更したい」のでこれで良いのですが、 @use や @forward の位置付けからすると役割を発揮できていない状態なので微妙なところ。

今後、 Bootstrap が @use, @forward に変更した場合にこの辺りの挙動は変わると思われます。

※ちなみに、v5.0.0-alpha3 でもまだ @import でした。

備考2

備考1と関連しますが、グローバルスコープに定義されるということは……

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

src/scss/layout/_l-header.scss は普通に src/scss/global/_index.scss を読み込み……

src/scss/layout/_l-main.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-main {
    background-color: f.$own-bg-color;
    color: f.$own-color;
    .btn-main {
        color: f.$own-color;
    }
}

// 略

src/scss/layout/_l-header.scss の後に読み込まれる src/scss/layout/_l-main.scss で with を使用した場合、以下のエラーが発生します。一度読み込んだモジュールが with 使用で再度読み込まれている、という旨のエラーですね。

Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

Error: src/scss/layout/_l-main.scss
Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

そのため、 with を使用するならば全体を通して src/scss/global/_index.scss が最初に @use で読み込まれる部分に既述する必要があります。

以上、知らないと全体的に嵌まり所が多い感じだったのでメモしておきます。

Bootstrap4のテーマをカスタマイズする３つの簡単な方法 | ホムペディア

Bootstrap (v5.0.0-alpha3)

twbs/bootstrap at v5.0.0-alpha3

「Bootstrap4」の記事 - Crieit

Honoka を node_modules 内で使用する

src/scss/global/framework.scss

モーダルの中で Slick を動かす場合の諸注意(setPotion指定、 Uncaught TypeError: Cannot read property 'add' of null エラー回避のために slick-initialized クラスの確認、 unslick 指定)

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

Dart Sass での検証1 (失敗 / 単純に @import を @use, @forward に書き換え)

Dart Sass での検証2 (失敗 / @foward ～ with)

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)