【簡単】bootstrapに新たな色を追加する方法

（最終更新月：2021年8月）

「Bootstrapの既存色を追加したい！」

という方へ向けた記事となります

公式ページで紹介されている通り、「primary」「secondary」「info」など既存に新たに「pink」「orange」を追加します

方法としては、「npm」を使い「scss」ファイルを書き換える方法となります

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

コードの紹介

【ファイル名：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を追加する方法でした