gb2013429的部落格

撰寫六角作業

自行設定BS5內容: fs-1 變為 fs-md-1，設定響應式

BS設定響應式:https://getbootstrap.com/docs/5.2/utilities/api/#enable-responsive

在all.scss設定檔案順序

一開始順序或將@import "../../node_modules/bootstrap/scss/utilities";往前

@import "../../node_modules/bootstrap/scss/functions";
@import "./helpers/_variables.scss";
@import "../../node_modules/bootstrap/scss/utilities";
@import "./utils/_utilities.scss";
@import "../../node_modules/bootstrap/scss/bootstrap";

出現  $utilities-border-colors 或 $theme-colors-rgb, rgba-caa-var, "$key", "focus-ring"

google查詢後，

在這"https://github.com/twbs/bootstrap/issues/36785"瞭解到

因Bootstrap5版本更新問題，新增功能導致

BS版本更新內容說明:https://getbootstrap.com/docs/5.2/migration/#new-_mapsscss

要注意以下檔案順序，就不會出現錯誤訊息
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

補充說明:

出現"primary":$primary-text-emphasis-dark

jo

需再多一個檔案

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

這樣才ok

結論

看到什麼錯誤就補那個錯誤在哪個檔案定義載入進來

.

.

.

.

連放兩天颱風假，卻卡在這

好崩潰啊~

.

內容有錯再請留言告知，感謝