（最終更新月：2021年8月）
「Bootstrapの既存色を追加したい！」
という方へ向けた記事となります
公式ページで紹介されている通り、「primary」「secondary」「info」など既存に新たに「pink」「orange」を追加します
方法としては、「npm」を使い「scss」ファイルを書き換える方法となります
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
created by Rinker
¥2,640
(2024/04/30 14:21:36時点 Amazon調べ-詳細)
コードの紹介
【ファイル名：customBoot.scss】
@import "~bootstrap/scss/functions.scss";
@import "~bootstrap/scss/variables.scss";
@import "~bootstrap/scss/mixins.scss";
$custom-colors:(
"pink": pink,
"orange":orange,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap.scss";【ファイル名：App.js】
ファイルのインポートをします
....
import "./cutomBoot.scss"
....
....解説
SCSSでは$変数名とすると、既存の変数へアクセスが可能です
既存の色は$theme-colorsという変数に保存されているため、$theme-colorsへ新たなthemeを追加をします
$custom-colorsという変数へ、新たな「pink」「orange」を作成し、既存の$theme-colorsへ追加します
$custom-colors:(
"pink": pink,
"orange":orange,
);
$theme-colors: map-merge($theme-colors, $custom-colors);ファイルの前後では変数を使用するために、variablesなどをインポートします
以上、Boostrapで新たなtheme-colorsを追加する方法でした